- What is jQuery
- Downloading jQuery
- jQuery Syntax
- jQuery Selectors
- jQuery Events/
- jQuery Show and Hide Effects
- jQuery Fading Effects
- jQuery Callback
- jQuery Getters Setter
- jQuery Insert Content
- jQuery Remove Elements Attribute
- jQuery add and remove css classes
- jQuery get-and-set-css-properties
- jQuery Dimensions
- jQuery Traversing
- jQuery Traversing Ancestors
- jQuery Traversing Descendants
- jQuery Traversing Siblings
- jQuery filtering
- jQuery ajax
- jquery ajax get and post requests
We can only choose elements further down the DOM tree using the jQuery selectors we’ve seen so far. Although there are numerous times when you need to choose a parent or descendant element, which is where jQuery’s DOM traversal functions come into play. We may simply navigate the DOM tree by using these traversal methods to move up, down, and all around it.
One of the key functions of jQuery is DOM traversal. You must comprehend the connections between the items in a DOM tree in order to get the most out of it.
< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>HTML DOM Tree Sample< /title> < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script> < /head> < body> < div class="container"> < h1>Hello World< /h1> < p>This is a < em>simple paragraph< /em>.< /p> < ul> < li>Step 1< /li> < li>Step 2< /li> < /ul> < /div> < /body> < /html>
The following DOM tree can be used to represent the HTML code in the previous example:
An above Diagram of the parent-child relationships between the elements is shown above:
- The < div> element’s parent and the ancestor of almost everything within of it belongs to the body component. The enclosing < div> element is a child of the < body> element as well as the parent of the < h1>, < p>, and < ul> elements.
- The < h1>, < p>, and < ul> elements were siblings as they have the same parent.
- The < h1> element is a descendent of the < body> component and a child of the < div> element. There aren’t any offspring of this element.
- The < p> element is a descendant of the body element, the parent of the < em>element, and a child of the div element. The contained < em> element is a descendent of the < div> and < body> elements and a child of this < p> element.
- The < ul> element is likewise the parent of the < li> elements, a < div> element’s child, and a < body> element’s descendant. The contained < li> elements are a descendant of the < div> and < body> elements and the child of this < ul> element. Additionally, the two < li> elements are related.
A parent, grandparent, great-grandparent, and so on are all examples of ancestors in logical relationships. A child, grandchild, great-grandchild, etc., is a descendant. Elements with a common parent are considered siblings.
Now that you are aware of the logical connections between the components of a DOM tree. You will learn how to use jQuery to conduct a variety of traversal actions, such as moving up, down, and sideways through the DOM tree, in the following chapters.
Q1. What is jQuery traversing?
jQuery traversal, which translates to “move through,” is used to “find” (or select) HTML items according to their relationships with other elements. When you have reached the elements you want, start with one option and work your way through it.
Q2. Which are the jQuery method for traversing DOM tree?
Iterating across DOM items in a DOM hierarchy is possible with the jQuery traversing methods. To update an element, first use the selector to retrieve its reference, and then use jQuery’s traversal methods. Key DOM manipulation functions include each(), children(), find(), first(), parent(), next(), previous(), siblings(), and more.
Q3. What is siblings method in jQuery?
The siblings() function is a built-in feature of jQuery that is used to locate all siblings of the currently selected element. Siblings in the DOM Tree are those with the same parent element. The World Wide Web Consortium has developed the DOM (Document Object Model) standard. This defines how to access DOM tree elements.
Q4. What are traversing functions?
In jQuery, traversing refers to travelling through or over the HTML components in order to locate, filter, or pick out a specific or all of them. It provides every descendant element of the chosen selection. between the supplied selection and parameters, it returns all ancestor elements.
Q5. What is MultiSelect in jQuery?
A form component called jQueryMultiSelect enables users to pick multiple things from a menu of available choices. Users can preview their list of selected items using a stylish visual interface since each selected item is represented as a tag with an integrated icon to remove the value.