English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
jQuery allows us to navigate the DOM tree using node relationships.
jQuery provides various DOM traversal methods to randomly select elements in the document as well as sequential methods.
DOM traversal essentially means moving around the DOM that makes up the web page. When traversing the DOM, you can move up the document tree to any element required. You can also move down the hierarchy to a given child node, or to sibling nodes. This allows you to browse the HTML page to find the exact location where you need to collect some data or make changes.
The following figure displays an HTML page as a tree (DOM tree). Using jQuery to traverse, you can easily move up (ancestors), down (descendants), and sideways (siblings) in the tree from the selected element. This movement is called DOM tree traversal-or navigate-or move.
As can be seen from the above figure:
<html> is the parent element of <head> and <body>, and it is the parent of all elements.Ancestor
<head> is the parent element of <title>, and a child element of <html>.
<body> is a child of <h1parent element of > and <a>, and a child element of <html>.
<title> is a child of <head>, and a descendant of <html>.
<h1> is a child of <body>, and a descendant of <html>.
<a> is a child of <body>, and a descendant of <html>.
These two <h1of > and <a>Sibling elements at the same levelThey have a common parent element), are descendants of <html> and <body>.
Ancestors are parents, grandparents, great-grandparents, and so on.
Descendants are children, grandchildren, great-grandchildren, and so on.
Sibling elements are those that share the same parent element.
jQuery provides various methods to allow us to traverse the DOM.
The next chapter will show you how to move up and down in the DOM tree.
For a complete reference of traversal methods, please visit ourjQuery Traversal Reference.