What is Traversing?

jQuery Traversing refers to the process of "moving through" the DOM tree to find and select HTML elements based on their relationship to other elements.

You typically start with a selected element and then move:

• 🔼 Upward → to find ancestors (parents, grandparents)
• 🔽 Downward → to find descendants (children, grandchildren)
• 🔁 Sideways → to find siblings (next, previous)

This navigation through the DOM structure is called traversing.

Explanation of the DOM Relationships:

1. The <div> element is the parent of <ul>, and an ancestor of everything inside it:
2. The <div> element contains the <ul> as its child.
3. Every other element inside the <div>, including the <ul>, <li>, <span>, and <b>, are descendants of the <div>.
4. The <ul> element is the parent of both <li> elements, and a child of <div>:
5. The <ul> element directly holds two <li> elements as children.
6. It is itself a child of <div>.
7. The left <li> element is the parent of <span>, a child of <ul>, and a descendant of <div>:
8. The left <li> element contains the <span> as its child.
9. It is a child of the <ul>, which is in turn a descendant of the <div>.
10. The <span> element is a child of the left <li> and a descendant of <ul> and <div>:
11. The <span> element is inside the left <li>, making it a direct child of the <li>.
12. It is also a descendant of both the <ul> and <div>.
13. The two <li> elements are siblings (they share the same parent):
14. Both <li> elements are direct children of the same <ul> element, making them siblings.
15. The right <li> element is the parent of <b>, a child of <ul>, and a descendant of <div>:
16. The right <li> element contains the <b> as its child.
17. It is a child of the <ul>, which is in turn a descendant of the <div>.
18. The <b> element is a child of the right <li> and a descendant of <ul> and <div>:
19. The <b> element is inside the right <li>, making it a child of the right <li>.
20. It is also a descendant of both the <ul> and <div>.

Traversing the DOM

jQuery makes navigating through the HTML structure (DOM) super convenient with traversal methods.

These methods let you move:

• Up the DOM tree (to ancestors)
• Down the DOM tree (to descendants)
• Sideways (to siblings)

The next chapters will show us how to travel up, down and sideways in the DOM tree.