jQuery Traversing (Navigation)
What exactly is traversing?
jQuery traversing would be used to "discover" (or select) HTML components based on their connection to other elements. Begin with one option and work your way with it until you achieve the desired elements.
An HTML page is depicted as a tree in the image below (DOM tree). Folks can quickly travel up (ancestors), down (descendants), sidewards (siblings) in the tree using jQuery traversing, beginning from the chosen (current) element. This is alluded to as traversing - or starting to move into it - the DOM tree.
Explanation of the illustrative example:
The <div> element is the parent of <ul>, and an ancestor of everything inside of it
The <ul> element is the parent of both <li> elements, and a child of <div>
The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
The <span> element is a child of the left <li> and a descendant of <ul> and <div>
The two <li> elements are siblings (they share the same parent)
The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
The <b> element is a child of the right <li> and a descendant of <ul> and <div>
A parent, a grandparent, a great-grandparent, and so on are all examples of ancestors.
A descendant somebody who is a child, grandchild, great-grandchild, and so on.
Siblings are tried to raise by the same parent.
Crossing the DOM
The DOM can be navigated using a range of techniques provided by jQuery. Tree traversal is the most popular type of traversal method. The following chapters will demonstrate how to navigate the DOM tree by going up, down, and sideways.