jQuery DOM Traversal
Use jQuery to traverse the DOM with ease. Here's how.
jQuery includes a whole range of methods that make it easy to traverse the DOM.
The DOM (document object model) is the interface that enables JavaScript to interact with a web page's content. Whenever we use JavaScript (or jQuery) to inspect or manipulate elements on the web page, we're accessing the DOM.
The DOM can be thought of as a tree-like structure, with each element being a separate node on that tree.
DOM traversal basically means moving around the DOM that makes up the web page. When traversing the DOM, you can move back up the document tree to any desired element. You can also move down the hierarchy to a given child node, or across to a sibling node (i.e. one that shares the same parent as the current node). This enables you to navigate through an HTML page in order to find the exact spot at which you need to gather some data or make a change.
Traversing the DOM enables you to do things like:
- Filter elements based on a given criteria.
- Insert new elements at a particular place.
- Remove elements that match a given criteria.
- Highlight one or more elements within a group of elements.
However, most DOM traversal methods don't actually modify an object (that's more the domain of the manipulation methods). The jQuery traversal methods are more concerned with enabling you to select the exact objects you need, so that you can then do whatever you need to do with them.
Below are some of the more commonly used jQuery traversal methods.
The find() Method
The find() method enables you to get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Here's some sample code where we use find() to find the second child list item, then highlight it using the css() method:
And here's a working example:
There's also a children() method that works in a similar way, except that it only goes a single level down the DOM.
The has() Method
Allows you to reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
In other words, you get elements that match your selector, but only if they have the element provided to the has() method.
Here's an example:
In this example we give all li elements that have a ul element a background color of yellow.
And here it is in action:
The eq() Method
The eq() method allows you to reduce the set of matched elements to the one at the specified index.
Here's some sample code:
And here's a working example:
Note that the index count starts at zero, so a value of 4 will select the fifth object, not the fourth.
You can also supply a negative value. Doing this specifies the position starting from the end of the set.
The filter() Method
The filter() method lets you reduce the set of matched elements to those that match the selector or pass the function's test.
Here's some sample code where we use the filter() to filter out the odd list items, and fadeOut() to hide them by slowly fading them out:
And here's a working example:
Note that :even and :odd use zero-based indexing, so the odd list items will start at the second list item.
The not() Method
The not() method allows you to remove elements from the set of matched elements.
Here's an example where we fade out the even list items (i.e. "not odd" ones):
And here's a working example:
The siblings() Method
The siblings() method returns all siblings of the matched set of elements.
Here's an example:
And here's a working example:
There are many other traversal methods in jQuery. See the jQuery documentation for a full list of traversal methods.