Tree Traversal in the DOM

This article is a complementary resource to the JavaScript in Browser course.

Tree Traversal in the DOM

We know that browsers display webpages by creating a tree-like model of HTML documents, called the DOM (Document Object Model).

The model is hierarchical in its structure, just like a family tree consisting of parents, children, and siblings.

In this article, you'll learn how to traverse the DOM by utilizing its hierarchical nature.

The DOM Equivalent of an HTML Document

Before learning about DOM traversal, let's first create a sample DOM tree of a simple HTML document. We'll then use this DOM tree to learn about traversal.

Here's the HTML document:

<html>
    <head>
        <title>My title</title>
    </head>

    <body>
        <a href="#">My link</a>
        <h1>My header</h1>
    </body>
</html>

The equivalent DOM tree is:

DOM Creates a Tree Structure of the HTML Document

Once you understand the DOM's tree structure and how its nodes are identified, you can start using JavaScript to access and alter the DOM.

Note: Each node in the tree (the individual elements, attributes, texts, etc.) is an "object." Hence, the name Document Object Model, where elements of the HTML documents are converted to a tree of objects.

So, let's enhance our understanding by exploring the hierarchical relationship between the DOM elements.

Three Types of Relationships in DOM

A given node in the DOM is related to other elements in the following ways:

Relationship	Description
Parent	The node that contains the node we're observing. Therefore, the parent node is one level above the observed node.
Sibling	A node that's on the same level as the observed node. It may or may not share the same parent with our node.
Child	A node that is contained by the node we're observing and is thus one level below.

Note: The root node has no parent or siblings.

Let's clarify this by observing the <body> node:

Here,

<html> is the parent node of <body> because it contains the <body> node.
<head> is a sibling node of <body> because it is on the same level.
<a> and <h1> are the children of <body> because they are contained within the <body> node.

Note: <title> is not a child node of <body> because it is contained within the <head> node and not within <body>.

How to Traverse the DOM?

Now that we know about the relationship between nodes, let's see how we can use these relationships to traverse through the DOM tree.

Traverse to the Parent Element

We use the parentElement property to traverse to the parent node. Let's use it to traverse to the parent of <body>.

// Select the body element
const body = document.querySelector("body");

// Traverse to the parent
const bodyParent = body.parentElement;

// Change the background color of the parent to lightblue
bodyParent.style.backgroundColor = 'lightblue';

Traverse to Children

To traverse to an element's children in the DOM, you can use the children property, or the firstChild and lastChild properties.

1. Using the children Property

The children property returns an HTMLCollection of an element's child elements. It only includes element nodes, excluding text and comment nodes.

Note: The HTMLCollection returned is live — it updates automatically if the DOM changes.

Now, let's get the children of the <body> element:

// Select the body element
const body = document.querySelector("body");

// Get the children of body
const children = body.children;

// Access individual children
for (let i = 0; i < children.length; i++) {
  console.log(children[i]);
}

2. Using the firstChild and lastChild Properties

The first child of an element is the first element contained by the given element in the HTML document. In other words, it is the leftmost child in the DOM.

Meanwhile, the last element of an element is the last element contained by the given element in the HTML document, i.e., the rightmost child in the DOM.

We select the first and last children of a node using the firstChild and lastChild properties, respectively.

These properties can return any type of node, including element nodes, text nodes, and comment nodes.

For example,

// Select the body element
const body = document.querySelector("body");

// Get the first and last children
const firstChild = body.firstChild;
const lastChild = body.lastChild;

console.log(firstChild);
console.log(lastChild);

3. Get Only the First and Last Element Children

To get only the first or last element child, you can use firstElementChild and lastElementChild.

// Select the body element
const body = document.querySelector("body");

// Get the first and last children
const firstElementChild = body.firstElementChild;
const lastElementChild = body.lastElementChild;

console.log(firstElementChild);
console.log(lastElementChild);

Traverse to Siblings

You can traverse the siblings of an element in the DOM using the following properties:

nextSibling - Returns the next node at the same tree level (can be any type of node).
previousSibling - Returns the previous node at the same tree level (can be any type of node).
nextElementSibling - Returns the next element node at the same tree level.
previousElementSibling - Returns the previous element node at the same tree level.

Let's see how we can use nextElementSibling and previousElementSibling in JavaScript:

// Select the body element
const body = document.querySelector("body");

// Get the next sibling element
let nextSibling = body.nextElementSibling;
console.log(nextSibling);

// Get the previous sibling element
let previousSibling = body.previousElementSibling;
console.log(previousSibling);