jQuery Traversal

What is traversal?

jQuery traversal, meaning "to move", is used to "find" (or select) HTML elements based on their relationship to other elements. Start with a selection and move through that selection until you reach the element you want.

The diagram below shows a family tree. With jQuery traversal, you can easily move upward (ancestors), downward (descendants), and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing the DOM.

Diagram explanation:

• The <div> element is the parent of <ul> and an ancestor of all of its contents.
• The <ul> element is the parent of the <li> elements and a child of <div>.
• The left <li> element is the parent of <span>, a child of <ul>, and a descendant of <div>.
• The <span> element is a child of <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>, a 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>.

	An ancestor is a parent, grandparent, great-grandparent, and so on. A descendant is a child, grandchild, great-grandchild, and so on. Siblings share the same parent.

Traversing the DOM

jQuery provides various methods for traversing the DOM.

The largest category of traversal methods is tree traversal.

The next chapter will explain how to move up, down, and sideways in the DOM tree.