Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



What is Traversing?

JQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. This start with one selection and move through that selection until we reach the elements you desire.

The image below illustrates a family tree. With jQuery traversing, we can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.

Illustration explained:

  • <div> element is the parent of <ul>, and an ancestor of everything inside of it
  • <ul> element is the parent of both <li> elements, and a child of <div>
  • <li> (left) element is the parent of <span>, child of <ul> and a descendant of <div>
  • <span> element is a child of the left <li> and a descendant of <ul> and <div>
  • <li> (two) elements are siblings (they share the same parent)
  • <li> (right) element is the parent of <b>, child of <ul> and a descendant of <div>
  • <b> element is a child of the right <li> and a descendant of <ul> and <div>
Traversing the DOM

JQuery supplies variety of functions that allows us to traverse the DOM.

Largest category of traversal functions are tree-traversal.

Next chapters will discribe us how to travel up, down and sideways in the DOM tree.



Related Videos