Traverse DOM using jQuery, more optimized approach

Here is the speed hierarchy in order of fastest to slowest
ID : $(‘#myElementID’)
Element : $(‘div’)
Class : $(‘.myClassName’)

jQuery uses JavaScript’s native getElementById() to find an ID in the document. It’s fast — probably the single fastest way to find something in the DOM — because it’s only looking for a single unique thing, and it’ll stop looking once it has found it. So, if we have <h2 id=”title”>This is my title</h2>, we would use $(‘#title’), not $(‘h2#title’) to access it.

To find a bare class name, as in #3 above, jQuery goes through every element in the entire DOM. To find an element, on the other hand, it uses getElementsByTagName(), thereby limiting the number of elements it has to traverse right from the start. Therefore, if we know which element the class is tied to, we can speed up the traversal significantly by referring to it, using, for example, $(‘div.some-class’) rather than $(‘.some-class’).

Likewise, we can help jQuery gather our classes faster if we can limit where jQuery looks to a particular ID: $(‘#sidebar .menu’), not $(‘.menu’).


One thought on “Traverse DOM using jQuery, more optimized approach

  1. more on this, you can call something like below $(“input .disabled_page_button”)
    to get all the input elements which has a call name disabled_page_button assigned to it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s