jQuery DOM Traversal

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: