DOM Traversal Methods

Selector Expressions
Examples
1. $('#myid'): selects the unique element with id='myid', regardless of its
tag name
2. $('p#myid'): selects a single paragraph with an id of 'myid'; in other
words, the unique element
Description
Each id value must be used only once within a document. If more than one element
has been assigned the same id, queries that use that id will only select the first
matched element in the DOM.
It might not be immediately clear why someone might want to specify a tag name
associated with a particular id, since that id needs to be unique anyway. However,
some situations in which parts of the DOM are user-generated may require a more
specific expression to avoid false positives. Furthermore, when the same script is run
on more than one page, it might be necessary to identify the id's element, since the
pages could be associating the same id with different elements. For example, Page A
might have while Page B has .
For a plain id selector such as example 2 above, jQuery uses the JavaScript function
getElementById(). If the script's execution speed is paramount, the plain id selector
should be used.
Class: .myclass
All elements that have a class of myclass.
Examples
1. $('.myclass'): selects all elements that have a class of myclass
2. $('p.myclass'): selects all paragraphs that have a class of myclass
3. $('.myclass.otherclass'): selects all elements that have a class of
myclass and otherclass
Description
In terms of speed, example 2 is generally preferable to example 1 (if we can limit
the query to a given tag name) because it first uses the native JavaScript function
getElementsByTagName() to filter its search, and then looks for the class within
the matched subset of DOM elements. Conversely, there is currently no native
getElementsByClassName() for jQuery to use, so using a bare class name forces
jQuery to match it against every element in the DOM. The difference in speed varies,
however, with the complexity of the page and the number of DOM elements.
[ 18 ]