RE: Re: which is faster target.getElementsByTagName or target.firstChild / nextSibli

Not quite on topic, but you might also want to consider the use of
bubbling the event, to avoid the BUFL.

It might go a little something like this:

        function rollout(e){
            var cn = this.className;
            this.className = cn.slice(0,cn.indexOf(' open'));
            this.onmouseout = null;
        }
        function rollover(e){
        	//cross browser event stuff
		e = e || window.event;
        	var target = e.target || e.srcElement;
            
		if(target.className == 'm1'){//filter the event by some
identifier
                target.className += ' open';
                target.onmouseout = rollout;
            }
        }
        window.onload = function(){
            document.getElementById('navigation').onmouseover =
rollover;
        }

With markup that looks a little like this: 

   	 <ul id="navigation">
		<li class="m1">Menu Item
			<ul>
				<li><a href="#">Menu Item</a></li>
            	</ul>
        	</li>
   	 </ul>

And css:
    ul li.m1 ul {
        display:none;
    }
    body ul li.open ul {
        display:block;
    }


Saves all the parsing time at start, but it can be a little tricky with
the event filtering.


Cory



-----Original Message-----
From: [email protected] [mailto:[email protected]] On Behalf
Of becs027
Sent: Thursday, April 06, 2006 7:01 PM
To: [email protected]
Subject: [wdf-dom] Re: which is faster target.getElementsByTagName or
target.firstChild / nextSibli

Thanks. I get weird results, and had to change the timediff bit a little
to get a result, I used:

var nTimeDiff = dEnd.getMilliseconds() - dStart.getMilliseconds();

In Firefox 1.5:
getElementsByTagName took 313ms
firstChild / nextSibling took 516ms

In Internet Explorer 6:
getElementsByTagName took 265ms
firstChild / nextSibling took 156ms

So looks like it depends on the browser. My function is only for IE
which helps :)

Cheers
Rebecca

--- In [email protected], "Ryan Hicks" <ryan.c.hicks@...> wrote:
>
> Rebecca,
> 
>  My vote would likely be for the getElementsByTagName, simply
because the
> conditional in the other option would have to reference the DOM an 
> additional time for each iteration.
> 
>  However, votes aside, you can always test the amount of time your 
> code takes to execute by doing something like the following:
> 
>  var dStart = new Date();
> 
> 	...chunk of code...
> 
>  var dEnd = new Date();
>  var nTimeDiff = dEnd.getDate() - dStart.getDate();  alert('Execution 
> time: ' + nTimeDiff + 'ms');
> 
>  Without having your actual DOM, I can't test these two scenarios to
verify
> if my vote is correct.  If you find that this technique gets you an
answer,
> I'd love to know which version wins out!
> 
> -ryan
> 
> -----Original Message-----
> From: [email protected] [mailto:[email protected]] On
Behalf Of
> becs027
> Sent: Thursday, April 06, 2006 4:44 PM
> To: [email protected]
> Subject: [wdf-dom] which is faster target.getElementsByTagName or 
> target.firstChild / nextSibling
> 
> Hi all,
> 
> I'm doing an onload script to add rollover behaviour to list items 
> (dropdown menu style) for IE, and want to check which of two ways is 
> faster.
> 
> ------------------------------------------------
> 
> Option 1 - add the behaviour using target.getElementsByTagName:
> 
> if (document.getElementById('navigation')) {
> 	    var target = document.getElementById('navigation');
> 	    var targetbuttons = target.getElementsByTagName('li');
> 
> 	    for (var i = 0; i < targetbuttons.length; i++) {
> 		targetbuttons[i].onmouseover = rollover;
> 		targetbuttons[i].onmouseout = rolloff;
>             }
> 	}
> 
> ------------------------------------------------
> 
> Option 2 - add the behaviour with a while loop using firstChild,
> nextSibling:
> 
> if (document.getElementById('navigation')) {
>                 var target = document.getElementById('navigation');
>                 var targetbutton = target.firstChild;
> 
>                 while (targetbutton) {
>                     targetbutton.onmouseover = rollover;
>                     targetbutton.onmouseout = rolloff;
>                     targetbutton = targetbutton.nextSibling;
>                 }
>             }
> 
> ------------------------------------------------
> 
> Thanks :)
> Rebecca
> 
> 
> 
> 
> 
> Unsubscribe
> [email protected]
> 
> List info
> http://www.quirksmode.org/dom/list.html
> Yahoo! Groups Links
>







Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links



 




Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/