Previous Next

jQuery Traversing

What is Traversing?

JQuery traversing, which means "pass", is used to "find" (or select) HTML elements based on their relevance to other elements. Start with one option and move on to that option until you reach the desired elements.

The image below shows the HTML page as a tree (DOM tree). With the help of jQuery, you can easily go up (ancestors), down (interest) and sideways (siblings) from the tree, starting at the selected (current) item. This movement is called traversing the - or passing - DOM tree.

Illustration explained:

• 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>

An ancestor is a parent, grandfather, ancestor, and so on.

A child is a child, a grandchild, a grandchild, and so on.

The siblings have one parent.

Traversing the DOM

JQuery offers a variety of methods that allow us to break the DOM.

The largest category of tree-traversal cross-cutting methods.

The following chapters will show you how to move up, down or sideways in the DOM tree.

Previous Next