How to use jQuery to traverse the DOM
DOM is a tree-like structure where each part of the HTML page (elements, attributes, text) is a node that can be accessed and modified. We can use jQuery to traverse the HTML document's DOM to navigate and easily select the HTML elements.
To use jQuery, we must include its library in the HTML document using the following code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
In this Answer, we will learn how to traverse the DOM of the HTML document using jQuery.
DOM in HTML documents
Before studying the traversal of the DOM tree, let's first clarify our concepts on the DOM tree using the following example.
<body><h1>Content of the heading</h1><div>Content of the div<p>Content of the paragraph</span></div><span>Content of the span</span></body>
We create the following DOM tree containing element nodes only for the code above.
In the above example, we have a <body> element at the top of the DOM tree. It is considered to be the parent of all elements with immediate children (<h1>, <div>,and <span>), and grandchild (<p>). The <h1>, <div>, and <span> are siblings among each other. The <span> element is the next sibling, and <h1> is the previous sibling of the <div> element.
Directions of traversal
We can traverse the DOM of an HTML document in three directions.
Upward traversal
Downward traversal
Side-ways traversal
Let's discuss each of the direction individually now.
Note: All the jQuery traversal functions discussed below return a collection of all the elements that match the specified criteria in our HTML document.
1. Upward traversal
We can use jQuery to traverse the DOM tree upwards to the parent, grandparent, and all other ancestors of an element. We have multiple functions that help us traverse the DOM upwards. Let's discuss these functions now.
The parent() method
We use the parent() method to get the direct parent of an HTML element. The syntax to use this method is the following:
$(selector).parent(cssSelector);
selector: The element we are targeting.cssSelector(optional): The CSS selector which further filters the parent element based on a specific condition. Only the parent element matching thecssSelectorwill be selected.
The parents() method
We use the parents() method to get all the ancestors of an HTML element. The syntax to use this method is the following:
$(selector).parents(cssSelector);
cssSelector(optional): The CSS selector which further filters the ancestors based on a specific condition. Only ancestors matching thecssSelectorwill be selected.
The parentsUntil() method
We use the parentsUntil() method to get all the ancestors of an HTML element up to a specific parent. The syntax to use this method is the following:
$(selector).parentsUntil(element, cssSelector);
element: A string or a DOM element representing an HTML element that defines the ancestor element up to which parents for theselectorare included in the result. Theelementitself is not included in the result.cssSelector(optional): The CSS selector which further filters the ancestors based on a specific condition. Only ancestors matching thecssSelectorwill be selected.
Code example
The following code example will help us understand the upward traversal of the DOM using the functions we have discussed above.
Code explanation
Line 4: We include the jQuery library.
Note: We write our JavaScript code inside the
<script>tag. We use theready()function to ensure the code inside it runs when the document is ready. To study more about this function, you can refer to this answer.
Line 8: We define the selector that selects all
<p>elements in the HTML document.Lines 10–11: We use the
parent()method to select the direct parent of the<p>element and then apply CSS to it to verify our result. In this case, this function will apply CSS to the<div>element having the classcontainer.Lines 14–15: We use the
parents()method to select the ancestors of the<p>element and then apply CSS to these to verify our results. In this case, this function will apply CSS to the<div>element having the classcontainerand the<body>element.Lines 18–19: We use the
parentsUntil()method to select the ancestor elements of the<p>up to, but not including, the<body>element and then apply CSS to these to verify our results. In this case, this function will apply CSS to the<div>element having classcontaineronly.Lines 23–31: We define the HTML elements.
2. Downward traversal
We can use jQuery to traverse the DOM tree downwards to the children, grandchildren, and all other descendants of an element. We have multiple functions that help us traverse the DOM downwards. Let's discuss these functions now.
The children() method
We use the children() method to get the direct children of an HTML element. The syntax to use this method is the following:
$(selector).children(cssSelector);
selector: The element we are targeting.cssSelector(optional): The CSS selector which filters the immediate children elements based on a specific condition. Only children elements match thecssSelectorwill be selected.
The find() method
We use the find() method to get all the children of an HTML element. This includes the direct children, grandchildren, and all the descendants. The syntax to use this method is the following:
$(selector).find(cssSelector);
cssSelector: The CSS selector or element which filters the descendants. Selecting only the descendant elements matching thecssSelector.
Code example
The following code example will help us understand the downward traversal of the DOM using the functions we have discussed above.
Code explanation
Line 9: We define the selector that selects all elements with the class
container.Lines 12–13: We use the
children()method to select the direct children(s) of the element with classcontainerand then apply CSS to these to verify our result. In this case, this function will apply CSS to<div>with the classcontent,<p>and<h1>elements.Lines 16–17: We use the
find()method to select the descendants of the element with classcontainerand then apply CSS to these to verify our result. The parameter of the function indicates that only descendants with<div>element will be selected. In this case, thecss()function will apply CSS to the<div>element with the classcontent.Lines 22–30: We define the HTML elements.
3. Sideways traversal
We can use jQuery to traverse the DOM tree sideways to the siblings of an element. We have multiple functions that help us traverse the DOM sideways. Let's discuss these functions now.
The siblings() method
We use the siblings() method to get all the siblings of an HTML element. The syntax to use this method is the following:
$(selector).siblings(cssSelector);
selector: The element we are targeting.cssSelector(optional): The CSS selector which filters the sibling elements based on a specific condition. Only the sibling elements matching thecssSelectorwill be selected.
The next() method
We use the next() method to get the immediate next sibling of an HTML element defined after it. The syntax to use this method is the following:
$(selector).next(cssSelector);
cssSelector(optional): The CSS selector which filters the immediate next sibling element based on a specific condition. The next sibling element will only be selected if it matches thecssSelector.
The nextAll() method
We use the nextAll() method to get all the next siblings of an HTML element defined after it. The syntax to use this method is the following:
$(selector).nextAll(cssSelector);
cssSelector(optional): The CSS selector which filters the next sibling elements based on a specific condition. The next sibling elements will only be selected if they matches thecssSelector.
The nextUntil() method
We use the nextUntil() method to get all the siblings of an HTML element up to a specific sibling. The syntax to use this method is the following:
$(selector).nextUntil(element, cssSelector);
element: A string or a DOM element representing a HTML element which defines the next sibling element up to which next siblings for theselectorare included in the result. Theelementitself is not included in the result.cssSelector(optional): The CSS selector which filters the next sibling elements based on a specific condition. The next sibling elements will only be selected if it matches thecssSelector.
The prev() method
We use the prev() method to get the immediate previous sibling of an HTML element that is defined before it. The syntax to use this method is the following:
$(selector).prev(cssSelector);
cssSelector(optional): The CSS selector which filters the immediate previous sibling element based on a specific condition. The previous sibling element will only be selected if it matches thecssSelector.
The prevAll() method
We use the prevAll() method to get all the previous siblings of an HTML element that is defined before it. The syntax to use this method is the following:
$(selector).prevAll(cssSelector);
cssSelector(optional): The CSS selector which filters the previous sibling elements based on a specific condition. The previous sibling elements will only be selected if it matches thecssSelector.
The prevUntil() method
We use the prevUntil() method to get all the previous siblings of an HTML element up to a specific previous sibling. The syntax to use this method is the following:
$(selector).prevUntil(element, cssSelector);
element: A string or a DOM element representing an HTML element that defines the previous sibling element up to which previous siblings for theselectorare included in the result. Theelementitself is not included in the result.cssSelector(optional): The CSS selector which filters the previous sibling elements based on a specific condition. The previous sibling elements will only be selected if it matches thecssSelector.
Code example
The following code example will help us understand the sideways traversal of the DOM using the functions discussed above.
Code explanation
Lines 9–10: We use the
siblings()method to select the siblings of the<p>element and then apply CSS to these to verify our results. In this case, thecssfunction will apply CSS to the<h1>,<div>with the classcontent1and<div>with the classcontent2.Lines 13–14: We use the
next()method to select the immediate next sibling of the<h1>element and then apply CSS to it to verify our result. In this case, thecssfunction will apply CSS to the<p>element.Lines 17–18: We use the
nextAll()method to select the next siblings of the<p>element and then apply CSS to it to verify our result. In this case, thecssfunction will apply CSS to the<div>with the classcontent1and<div>with the classcontent2.Lines 21–22: We use the
nextUntil()method to select the next elements of the<p>up to, but not including, the element with classcontent2and then apply CSS to these to verify our results. In this case, thecssfunction will apply CSS to the<div>with the classcontent1.Lines 25–26: We use the
prev()method to select the immediate previous sibling of the<ul>element and then apply CSS to it to verify our result. In this case, thecssfunction will apply CSS to the<span>element.Lines 29–30: We use the
prevAll()method to select all the previous siblings of the<ul>element and then apply CSS to these to verify our results. In this case, thecssfunction will apply CSS to the<span>element.Lines 33–34: We use the
prevUntil()method to select the previous elements of the classcontent1up to, but not including, the element with class<h1>and then apply CSS to these verify our results. In this case, thecssfunction will apply CSS to the<p>element.Lines 38–55: We define the HTML elements.
Conclusion
jQuery provides a powerful set of methods for traversing the DOM of an HTML document. We can traverse the DOM in three directions: Upwards, downwards, and sideways. Traversing the DOM helps us to easily access and manipulate specific elements based on their relative positions in the HTML document, making navigation and interaction with web page elements simple and easy.
Free Resources