jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery DOM Traversing

jQuery allows us to navigate the DOM tree using node relationships.

jQuery provides a variety of DOM traversal methods to select elements in a document randomly as well as in sequential method.


What is DOM Traversing?

DOM traversal basically means moving around the DOM that makes up the web page. When traversing the DOM, you can move back up the document tree to any desired element. You can also move down the hierarchy to a given child node, or across to a sibling node. This enables you to navigate through an HTML page in order to find the exact spot at which you need to gather some data or make a change.

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

DOM HTML tree

From the image above you can see:

  • The <html> is the parent of <head> and <body> elements, and an ancestor of everything inside of it
  • The <head> is the parent of <title> element, and child of <html>
  • The <body> is the parent of <h1> and <a> elements, and child of <html>
  • The <title> is the child of <head> element, and descendant of <html>
  • The <h1> is the child of <body> element, and descendant of <html>
  • The <a> is the child of <body> element, and descendant of <html>
  • Both <h1> and <a> are siblings (they share the same parent), and descendant of <body> and <html>

An ancestor is a parent, grandparent, great-grandparent, and so on.

A descendant is a child, grandchild, great-grandchild, and so on.

Siblings elements are those elements that share the same parent.


Traversing the DOM Tree

jQuery provides a variety of methods that allow us to traverse the DOM.

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


jQuery Traversing Reference

For a complete Traversing methods reference, visit our jQuery Traversing Reference.