Traversal
Traversal (Topic)
This topic contains all functions that are directly related to DOM traversal:
- .getAncestors() – get a list of ancestor elements.
- .getSiblings() – get a list of siblings to the elements.
- .getChildren() – get a list of children of an element.
- .getDescendants() – get a list of descendants of an element.
Understanding element relationships
The relationships of elements in a DOM tree use terminology of family relationships, with the topmost elements (starting with <html>) considered “older” and the deeper nestled ones “younger” family members.
For example, the following HTML snippet:
… <div> <ul> <li>…</li> <li>…</li> <li> <a href="…"> <span>When: <time>yesterday</time>. </span> </a> </li> <li>…</li> </ul> </div> …
When starting from the third <li> element (highlit in the example above), we call:
- The
<li>item that we start from: self - The other
<li>items that are on the same level as the self item as siblings - The elements that are directly underneath the self item, its children
- All elements that are underneath the self item, i.e. its children and the children’s children, etc.: descendants
- The element that is immediately one level above the self item is its parent
- All higher-level elements, including the parent and up to (and including) the
<html>element, are its ancestors
The four methods in this category allow to traverse the DOM tree in either direction to find related elements.
More information
- Node: parentElement property on MDN.
- Node: childNodes property on MDN.
- Node: removeChild() method on MDN.