Everything You Need To Know About JavaScript DOM Navigation

Let’s continue with the JavaScript DOM series, in this tutorial you will learn about JavaScript DOM navigation – how to navigate between DOM nodes in JavaScript. DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. In this article, you will learn how to navigate the DOM tree using JavaScript.

How To Access The Child Node In JavaScript

For this, you can use the firstChild and lastChild properties of the DOM to access the first and the last direct child. If there are no child elements null will be returned. Here’s an example:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text.</span></p>
</div>

<script>
let main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Result: #text

let hint = document.getElementById("hint");
console.log(hint.firstChild.nodeName); // Result: SPAN
</script>

As you can see in the above example, the nodeName of the first-child node of the main DIV element returns #text instead of H1. That happens because spaces, tabs, newlines, etc. are valid characters and they form #text nodes and become a part of the DOM tree.

To avoid the issue with firstChild and lastChild returning #text or #comment nodes, use the firstElementChild and lastElementChild properties. Here’s how:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text</span></p>
</div>

<script>
let main = document.getElementById("main");
console.log(main.firstElementChild.nodeName); // Result: H1
main.firstElementChild.style.color = "red";

let hint = document.getElementById("hint");
console.log(hint.firstElementChild.nodeName); // Result: SPAN
hint.firstElementChild.style.color = "blue";
</script>

Also you can use the childNodes property to access all child nodes of a given element. Here’s an example:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text.</span></p>
</div>

<script>
let main = document.getElementById("main");

// First check that the element has child nodes 
if(main.hasChildNodes()) {
    let nodes = main.childNodes;
    
    // Loop through node list and display node name
    for(let i = 0; i < nodes.length; i++) {
        console.log(nodes[i].nodeName);
    }
}
</script>

The childNodes returns all child nodes, including non-element nodes like text and comment nodes. If you want to get a collection of only elements, use children’s property. Just like that:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text.</span></p>
</div>

<script>
let main = document.getElementById("main");

// First check that the element has child nodes 
if(main.hasChildNodes()) {
    let nodes = main.children;
    
    // Loop through node list and display node name
    for(let i = 0; i < nodes.length; i++) {
        console.log(nodes[i].nodeName);
    }
}
</script>

How To Access Parent Node In JavaScript

You can use the parentNode property to access the parent of the specified node in the DOM tree.

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random.</span></p>
</div>

<script>
let hint = document.getElementById("hint");
console.log(hint.parentNode.nodeName); // Result: DIV
console.log(document.documentElement.parentNode.nodeName); // Result: #document
console.log(document.parentNode); // Result: null
</script>

If you want to get only element nodes you can use the parentElement, just like this:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text.</span></p>
</div>

<script>
vlet hint = document.getElementById("hint");
console.log(hint.parentNode.nodeName); // Result: DIV
hint.parentNode.style.backgroundColor = "yellow";
</script>

How To Access The Sibling Nodes In JavaScript

For this you can use the previousSibling and nextSibling properties that will access the previous and next node in the DOM tree. Here’s an example:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text.</span></p><hr>
</div>

<script>
let title = document.getElementById("title");
console.log(title.previousSibling.nodeName); // Result: #text

let hint = document.getElementById("hint");
console.log(hint.nextSibling.nodeName); // Result: HR
</script>

Or you can use the previousElementSibling and nextElementSibling to get the previous and next sibling element skipping any whitespace text nodes. All these properties return null if there is no such sibling. Here’s an example:

<div id="main">
    <h1 id="title">My Heading</h1>
    <p id="hint"><span>This is random text.</span></p>
</div>

<script>
let hint = document.getElementById("hint");
console.log(hint.previousElementSibling.nodeName); // Result: H1
console.log(hint.previousElementSibling.textContent); // Result: My Heading

let title = document.getElementById("title");
console.log(title.nextElementSibling.nodeName); // Result: P
console.log(title.nextElementSibling.textContent); // Result: This is random text.
</script>

The textContent property represents the text content of a node and all of its descendants. You can go to JavaScript DOM manipulation chapter to learn more about it.