Loading course content...
Table of Contents
Understanding the DOM Tree in JavaScript
Code Playground is only enabled on larger screen sizes.
We actually made a small mistake at the beginning of this chapter. Our DOM tree diagram was incomplete.
We only included the element nodes and the text nodes that contain information, but in fact, there are also nodes representing newline characters (\n) and spaces in between the elements.
You can see them by executing the following code:
javascript
console.log(document.body.childNodes);The childNodes property returns all child nodes of <body>.
They were omitted for simplicity, but it becomes a problem when you try to move though the DOM tree. You need to remember that these nodes exist, or you might end up going to the wrong node.
In fact, there are 12 different types of nodes in a DOM tree, but in most cases, we only work with element nodes and the text nodes that contain information.
This can be very annoying. Why do we have to count the nodes that don't really show up in the browser?
Luckily, there is an Element interface that allows you to move through the tree while only counting the element nodes, as we will see later.
For every node object, there are the following properties you can use to move to other nodes:
| Node | Explanation | Element | Explanation |
|---|---|---|---|
parentNode | Returns the direct parent of the current node. | parentElement | Returns the parent only if it is an Element, otherwise null. |
childNodes | Returns a NodeList of all child nodes. | children | Returns an HTMLCollection of child elements only. |
firstChild | The first child Node of an element. | firstElementChild | The first child that is an Element node. |
lastChild | The last child Node of an element. | lastElementChild | The last child that is an Element node. |
nextSibling | The next sibling Node at the same tree level. | nextElementSibling | The next sibling that is an Element node. |
previousSibling | The previous sibling Node at the same tree level. | previousElementSibling | The previous sibling that is an Element node. |
Their relations are shown in the diagram below.
Getting the parent
Let us start by discussing how to select the parent from a child. For example,
html
<body>
<div id="parent">
<p id="child">Lorem ipsum dolor. . .</p>
<p>Lorem ipsum dolor. . .</p>
</div>
<script src="./index.js"></script>
</body>Starting from #child, you can access its parent node using the property parentNode.
javascript
let child = document.getElementById("child");
let parent = child.parentNode;
console.log(child);
console.log(parent);
This parentNode property works for all node types. If you want something specific to element nodes, you can go with parentElement.
javascript
let child = document.getElementById("child");
let parent = child.parentElement;
console.log(child);
console.log(parent);Getting the child
html
<body>
<div id="parent">
<p>Lorem ipsum dolor. . .</p>
<p>. . .</p>
</div>
<script src="./index.js"></script>
</body>To access the children of an element, use the property childNodes.
javascript
let parent = document.getElementById("parent");
let children = parent.childNodes;
console.log(children);
Individual child nodes can be accessed using a for...of loop.
javascript
let parent = document.getElementById("parent");
let children = parent.childNodes;
for (let e of children) {
console.log(e);
}Or by specifying an index number directly.
javascript
let parent = document.getElementById("parent");
let children = parent.childNodes;
console.log(children[0]);
console.log(children[1]);
console.log(children[2]);
console.log(children[3]);
console.log(children[4]);If you wish to work with element nodes only, use children instead.
javascript
let parent = document.getElementById("parent");
let children = parent.children;
console.log(children);Similarly, individual element nodes can be accessed with an index or a for...of loop.
In practice, you might only care about an element's first or last child nodes.
For example, you could be trying to add a notification banner at the top of a webpage, and you need to locate the first child of the <body> element.
In this case, several shortcut properties are provided.
To access the first or last child node of an element, use firstChild or lastChild.
html
<body>
<div id="parent">
<p id="first">Lorem ipsum dolor. . .</p>
<p id="second">. . .</p>
<p id="third">. . .</p>
</div>
<script src="./index.js"></script>
</body>javascript
let parent = document.getElementById("parent");
console.log(parent.firstChild);
console.log(parent.lastChild);
To access the first or last element child node, use firstElementChild or lastElementChild.
javascript
let parent = document.getElementById("parent");
console.log(parent.firstElementChild);
console.log(parent.lastElementChild);Getting the siblings
The sibling nodes can be accessed through properties nextSibling and previousSibling.
javascript
let middle = document.getElementById("second");
console.log(middle.previousSibling);
console.log(middle.nextSibling);
However, in most cases, you are going to get the line break nodes between elements, which are not very useful.
Instead, you can exclude them by accessing only the element nodes, using properties nextElementSibling and previousElementSibling.
javascript
let middle = document.getElementById("second");
console.log(middle.previousElementSibling);
console.log(middle.nextElementSibling);<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>DOM Traversal Demo</title> </head> <body> <div id="parent"> <p id="first">First child</p> <p id="middle">Middle child</p> <p id="last">Last child</p> </div> <script src="script.js"></script> </body> </html>