What is Traversing?
The jQuery selectors allow us to select the elements down the DOM tree. But in some cases, you need to select a parent or ancestor element. With jQuery traversing method, you can traverse up, down and all around the DOM tree. The traversing enables you to navigate through an HTML page to find the exact location at which you need to gather some data or make a change.
The following image describes an HTML page as a DOM tree. Using jQuery traversing you can easily move up, down and sideways in the tree, this movement is called traversing or navigating through the DOM tree.
In the above image:
- The <html> is the parent of <head> and <body> elements, and an ancestor of everything inside of it.
- The <head> is the parent of <title> element, and child of <html>.
- The <body> is the parent of <h1> and <a> elements, and child of <html>.
- The <title> is the child of <head> element, and descendant of <html>.
- The <h1> is the child of <body> element, and descendant of <html>.
An ancestor is a parent, grandparent, great-grandparent and so on, and a descendant is a child, grandchild, great-grandchild and so on. Siblings elements are those elements that share the same parent.
Traversing the DOM Tree:
It is important to understand the logical relationships between the elements in a DOM tree. In our next topics, you will learn how to perform various traversing operations such as traversing up, down and sideways the DOM tree using the jQuery.