Traversing DOM Using jQuery

Overview

jQuery is a very powerful tool that provides a variety of DOM traversal methods to assist us in selecting elements in an HTML or XML document in both a random and sequential manner. The DOM organizes elements into a tree-like data structure that can be traversed to navigate and locate content within an HTML or XML document.

The DOM tree can be thought of as a collection of nodes connected by parent-child and sibling-sibling relationships, with the root starting from the top parent, which is an HTML element in an HTML document.

What is Traversing?

DOM traversing using jQuery is used to find (or select) HTML elements based on their relationship to other elements. Begin with one option and work your way through it until you reach the desired elements.

An HTML page is depicted as a tree in the image below (DOM tree). You can easily move up(ancestors), down(descendants), and sideways(siblings) in the tree using jQuery traversing, starting from the selected (current) element. This is known as traversing - or moving through - the DOM tree.

Traversing the DOM Tree

jQuery provides a number of methods for traversing the DOM.

Tree traversal is the most common type of traversal method. An ancestor is a parent, grandparent, great-grandparent, and so on in logical relationships.

jQuery provides useful methods such as parent(), parents(), and parentsUntil() that can be used to traverse the DOM tree on single or multiple levels to quickly get the parent or other ancestors of an element in the hierarchy.

The majority of DOM Traversal Methods do not modify the jQuery DOM object and are used to filter out elements from a document based on specified conditions.

jQuery provides methods for traversing in three directions:

Traversing Upwards - This path leads to the ancestors (Parent, Grandparent, Great-grandparent, etc.).
Traversing Downwards entails traversing the descendants in this direction (Child, Grandchild, Great-grandchild, etc.).
Sideways - Traveling in this direction means passing through the ancestors and siblings (For example, brother and sisters are at the same level).

jQuery DOM Traversing Methods

jQuery - Traversing upwards

jQuery parent() Method

The parent() method returns the selected element's direct parent element. This method only goes one level up the DOM tree.

The example below returns the direct parent element of each <span> element:

jQuery parents() Method

The parents() method returns all ancestor elements of the selected element, all the way up to the root element (<html>) of the document.

The example below returns all ancestors of all <span> elements:

An optional parameter can also be used to narrow down the search for ancestors.

The example below returns all ancestors of all <span> elements that are <ul> elements:

jQuery parentsUntil() Method

The parentsUntil() method returns all ancestor elements that exist between two specified arguments.

The example below returns all ancestor elements between a <span> and a <div> element:

jQuery - Traversing Downwards

jQuery provides methods for traversing the DOM tree downwards to find the descendant(s) of a given element. These methods can be used to locate a child, grandchild, great-grandchild, and so on for a given DOM element.

There are two ways to traverse downward within the DOM tree:

children() - returns all of the matched element's direct children.
find() - returns all descendants of the matched element.

The method children() differs from find() in that it only traverses one level down the DOM tree, whereas find() can traverse multiple levels to select descendant elements (children, grandchildren, great-grandchildren, and so on).

jQuery children() Method

The jQuery children() method returns all of the matched element's direct children.

The method's simple syntax is as follows:

In the method, we can optionally include a filter selector. If a filter is provided, the elements will be filtered by seeing if they match it.

Example:

find() Method in jQuery

The find() method of jQuery returns all descendants of the matched element.

The method's simple syntax is as follows:

This method requires the use of a filter selector. To return all the descendants of the matched element, we must pass * as a filter. Otherwise, the elements will be filtered by testing whether they match the filter.

Example:

jQuery - Traversing Sideways

Siblings are elements that share the same parent in logical relationships.

To traverse sideways in the DOM tree, jQuery provides several methods such as siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), and prevUntil().

jQuery siblings() Method

To get the sibling elements of the selected element, use the jQuery siblings() method. The following example uses the class to highlight the siblings of the <p> element, which are <h1> and <ul>.

Example:

jQuery next() Method

The jQuery next() method is used to get the element's immediately following sibling, i.e., the next sibling element. The <ul> element is the <p> element's next sibling, as shown in the following example.

jQuery nextAll() Method

The jQuery nextAll() method returns all siblings of the selected element. The example below will highlight all siblings of the <p> element that comes after it.

Example:

jQuery nextUntil() Method

The jQuery nextUntil() method returns all siblings up to but excluding the element matched by the selector. In a nutshell, it returns all the next siblings elements in a DOM hierarchy between two given elements.

The following example will highlight all of the <h1> element's siblings except the <ul> element, i.e. highlight both the <p> elements.

jQuery prev() Method

The jQuery prev() method is used to get the selected element's immediately preceding sibling, i.e., the previous sibling element. The preceding sibling of the <ul> element, the <p> element, is highlighted in the following example.

jQuery prevAll() Method

The jQuery prevAll() method returns all siblings of the selected element. The example below will highlight all siblings of the <ul> element that comes before this.

jQuery prevUntil() Method

The jQuery prevUntil() method returns all siblings preceding but not including the element matched by the selector. In a nutshell, it returns all the previous siblings elements in a DOM hierarchy between two given elements.

The following example will highlight all of the <ul> element's previous sibling elements except the <h1> element, highlighting both the <p> elements.

jQuery DOM Filtering Methods

To narrow the search for elements in a DOM tree, jQuery provides several methods such as filter(), first(), last(), eq(), slice(), has(), not(), and so on.

jQuery first() Method

The first() method of the jQuery library filters the set of matched elements and returns the first element in the set. By using the class, the following example will only highlight the first <li> element within the <ul> element.

last() Method in jQuery

The last() method of jQuery filters the set of matched elements and returns the last element in the set. By using the class, the following example will only highlight the last <li> element within the <ul> element.

eq() Method in jQuery

The eq() method of jQuery filters the set of matched elements and returns only one element with the specified index number.

The class is used to highlight the second <li> element within the <ul> element in the following example.

filter() Method in jQuery

To filter the set of matched elements based on specific criteria, the jQuery filter() method accepts a selector or a function as an argument.

The filter() method tests the supplied selector or function against each element in the set of matched elements, and all elements that match the supplied selector or pass the function's test are included in the result.

has() Method in jQuery

The has() method of jQuery filters the set of matched elements and returns only those that have the specified descendant element.

The example below will highlight all <li> elements that have descendant <ul> elements.

not() Method in jQuery

The not() method of jQuery filters the set of matched elements and returns all elements that do not meet the specified conditions. It can be passed as a selector or a function as an argument.

The not() method tests the supplied selector or function against each element in the set of matched elements, and all elements that do not match the supplied selector or pass the function's test are included in the result.

slice() Method in jQuery

The slice() method of jQuery filters the set of matched elements specified by an index range. This method accepts start and end (optional) index numbers as arguments, where the start index specifies where the elements begin to be selected, and the end index specifies where the elements stop being selected.

The following example uses the class to highlight the first and second <li> elements within the <ul> element.

Conclusion

In this article, we discussed how the DOM traversing using jQuery works, its parent, child, and sibling methods in detail, and their filtering types also.
Do check about it and do code on your own for better understanding.