The process of jQuery traverse is described as finding parents and ancestors of different HTML elements by moving through the DOM of a web page. In other words, we create an initial selection and start traversing the DOM.
You can also make the jQuery DOM traversal more specific by adding filters. For instance, you can limit the process to elements with a particular class.
Bear in mind that the most common jQuery traversing methods won't be capable of modifying the elements. They are designed to help developers specify which items they want to get the information about. This tutorial provides you with the basics of traversing so you would understand the process in general.
jQuery Traverse: Main Tips
- jQuery traversing refers to a process of moving through the DOM to find specific HTML elements.
- This search depends on the relations between elements.
- jQuery provides multiple methods for traversing the DOM conveniently and dynamically.
Traversing Basics
To traverse means to move through. To jQuery, traverse means to use methods for accessing and finding certain elements within the DOM.
Here is an example of an HTML document layout. We will analyze this example and explain the traverse basics as well. You can also see the .parentsUntil() method being applied. It is one of the methods you can retrieve from the jQuery library.
This layout has a clear structure, which we will investigate using relevant terms:
<div>is the parent of<ul>, and an ancestor to every element in it.<ul>is the parent to the<li>elements, as well as a child to<div>.<li1>and<li2>are siblings because they have a shared parent.<li1>is a parent to<span1>, child to<ul>and a descendant to<div>.<li2>is the parent to<span>, child to<ul>and a descendant to<div>.<span1>is a child of<li1>as well as a descendant to<div>and<ul>.<span2>is a child to<li2>as well as a descendant to<div>and<ul>.
For a more in-depth look at the node relationships, look at the JavaScript HTML DOM Navigation tutorial. That will also help to understand jQuery DOM traversal better.
jQuery Traverse: Summary
- To jQuery traverse means that you apply specific methods to retrieve information on relations between HTML elements.
- You can get methods that are applied for traversing from jQuery library.