Rails spinoffs - May 2006 - Limiting getElementsByClassName to specific nodes and entities

I''m currently using "The Ultimate getElementsByClassName"
(http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/)
 instead of the Prototype version. This version seems to be faster since it
lets you specify the starting node and  the type of entity. For example:

        var widgets = getElementsByClassName(document, "ol",
"tree");

Is there a way to do this within Prototype''s version? Looking at the
code,
it looks like you may be able to pass the parent node, can anyone verify
this? Is there a benefit to building this same functionality into
Prototype, or is it best to stick with "The Ultimate..." version?
I''m at
the beginning of developing a set of reusable GUI components and would like
to minimize dependencies where possible.

Thank you,
Jeff Rankin
Human Factors
544-4333

That method looks like it works a little bit different.  It looks at
all the ol tags and looks for a class of tree on those tags.  The
prototype version doesn''t take any parameters for tag name.  It is
used like this:
var trees = document.getElementsByClassName(''tree'',
parent_dom_element_or_id);

As you said the second element is optional if you don''t pass it it
looks at all tags under document.body.

Nicholas

On 5/30/06, WJRANKIN-uNZObgmCpkU@public.gmane.org
<WJRANKIN-uNZObgmCpkU@public.gmane.org> wrote:
> I''m currently using "The Ultimate
getElementsByClassName"
>
(http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/)
>  instead of the Prototype version. This version seems to be faster since it
> lets you specify the starting node and  the type of entity. For example:
>
>         var widgets = getElementsByClassName(document, "ol",
"tree");
>
> Is there a way to do this within Prototype''s version? Looking at
the code,
> it looks like you may be able to pass the parent node, can anyone verify
> this? Is there a benefit to building this same functionality into
> Prototype, or is it best to stick with "The Ultimate..." version?
I''m at
> the beginning of developing a set of reusable GUI components and would like
> to minimize dependencies where possible.
>
> Thank you,
> Jeff Rankin
> Human Factors
> 544-4333
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

-- 
DCRails.com || Making the Metrorail fun!

Jeff Rankin wrote:
>         var widgets = getElementsByClassName(document, "ol",
"tree");
Couldn''t you use the selectors support. So the above would be:

widgets = $$(''ol.tree'');

If you wanted to limit it to just a certain subset of the document to 
search you could do:

widgets = $$(''#my_section ol.tree'');

The implementation of $$ seems quite efficient and I have yet to have 
performance problems.

Eric

Thanks - I''m finding the selectors method a lot slower than both
"The
Ultimate" version and Prototype''s getElementsByClassName, at least
for
pages with large DOMs.

Jeff Rankin
Human Factors
544-4333



                      Eric Anderson <eric-ANzg6odk14w@public.gmane.org>
                      Sent by:                                 To:      
rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
                     
rails-spinoffs-bounces-1W37MKcQCpIbvKGg9ot7NQ@public.gmane.org        cc:      
(bcc: William J. Rankin/UPC)
                      onrails.org                              Subject: 
[Rails-spinoffs] Re: Limiting getElementsByClassName to
                                                                specific      
nodes and entities

                      05/30/2006 03:58 PM
                      Please respond to rails-spinoffs






Jeff Rankin wrote:
>         var widgets = getElementsByClassName(document, "ol",
"tree");
Couldn''t you use the selectors support. So the above would be:

widgets = $$(''ol.tree'');

If you wanted to limit it to just a certain subset of the document to
search you could do:

widgets = $$(''#my_section ol.tree'');

The implementation of $$ seems quite efficient and I have yet to have
performance problems.

Eric

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

WJRANKIN-J6ISH/MDR2c@public.gmane.org wrote:
> Thanks - I''m finding the selectors method a lot slower than both
"The
> Ultimate" version and Prototype''s getElementsByClassName, at
least for
> pages with large DOMs.
I would imagine they can be slower because they are so capable but there 
are a few tips you can keep in mind that can help performance.

* Do what you can to limit class comparisons. Doing a class comparison 
is an expensive operation. To test if an element has a matching class 
the Selectors use Element.hasClassName() which is expensive because it 
must parse the class attribute (split on spaces) and then do a linear 
search. This makes the overall search for matching elements a O(N^2) 
operation. Element.hasClassName() could probably have it''s performance 
improved by using a regular expression like 
document.getElementsByClassName() does, but it will never be cheap 
because searching for a matching class will always involve a linear 
search through a list of possible DOM elements (keeping it still a O(N) 
operation).

* Also limit the number of attribute comparisons. Finding elements with 
matching attributes also is an expensive operation. Doing a single 
comparison is not expensive (an O(1) operation) but a linear search of 
all possible elements must still be done making the overall process an 
expensive operation (O(N)).

* Use ID selectors to narrow your search field. For example "#news 
.item" is much faster than just ".item" (assuming your document
is
constructed so that those queries return the same results). This is 
because it first finds the #news DOM Element using 
document.getElementByID() (which is browser implemented and therefore 
fast) and then only does the linear search on all child nodes of #news 
for the matching elements. This can greatly reduce the number of class 
comparisons.

* If you know the tag name for matching elements use it even if it is 
not necessary for finding the elements you are after. This is because 
the Selectors use document.getElementsByTagName() to reduce the number 
of elements considered (which is a browser implemented function and 
therefore fast).

* Combine methods of improving performance. For example:
   ".delete" - Really Slow
   ".item .delete" - Slow
   "#news .item .delete" - Faster
   "#news tr.item .delete" - Even faster
   "#news tr.item a.delete" - Blazing

Take a look at the source for the Selectors. It is a little dense but 
understanding how it will work will help you keep your application 
responding smoothly while still keeping your code very readable.

Eric