Javascript DOM navigation

Tanay Kumar Deo
Last Updated: May 13, 2022

Introduction

Before moving ahead with the DOM Navigation in javascript, let's understand what DOM is? The Document Object Model is a standard platform and language-independent object model and programming interface for HTML Documents. All parts of the document in DOM, such as elements, text, attributes, images, etc., are organized in a hierarchical tree-like structure, like a family tree in real life that consists of child and parent. In DOM, these individual parts of the document are nodes.
 

DOM Tree

DOM nodes provide several properties and methods for DOM navigation through the tree structure of the DOM and make changes very quickly. In the upcoming section, we will learn how to navigate up, down, and sideways in the DOM tree using JavaScript.

DOM navigation between nodes

We can use the following node properties for DOM navigation between the nodes of the DOM tree using javascript:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Accessing the Child Nodes

This section will learn to navigate through the child nodes using different available properties. Firstly let's try to access the first and last direct child node of a node in DOM using the firstChild and lastChild property, respectively. 

<div id="root">
   <h1 id="title">JS DOM navigation Tutorial</h1>
   <p id="disc"><span>You are learning from codestudio.</span></p>
</div>

<script>
var root = document.getElementById("root");
console.log(root.firstChild.nodeName); // Prints: #text

var disc = document.getElementById("disc");
console.log(disc.firstChild.nodeName); // Prints: SPAN
</script>

 

Output:

Console:

#text

SPAN

 

In the above example, root.firstChild.nodeName returns the #text node instead of the whole h1 element. Because, whitespace such as tabs, spaces, newlines, etc. are characters and they form #text nodes and become a part of the DOM tree and our <div> tag contains a newline before <h1> tag, so it will be treated as a #text node. disc.firstChild.nodeName returns the SPAN element as there are no whitespaces between the <p> tag and <span> tag.

To avoid this issue of firstChild and lastChild property returning #text or #comments nodes, we use firstElementChild and lastElementChild property to get the first and last DOM element nodes.

<div id="root">
   <h1 id="title">JS DOM navigation Tutorial</h1>
   <p id="disc"><span>You are learning from codestudio.</span></p>
</div>

<script>
var root = document.getElementById("root");
console.log(root.firstElementChild.nodeName); // Prints: H1

var disc = document.getElementById("disc");
console.log(disc.firstElementChild.nodeName); // Prints: SPAN
</script>

 

In the above example, we can see that root.firstElementChild.nodeName returns H1 element node and not a #text node. So, it is always good to use firstElementChild and lastElementChild if we need to access the element node and not #text or #comments node.

Output:

Console:

H1

SPAN

 

We can also access the child nodes using childNodes[nodeNumber] property. We can use this property to access all the child nodes of a given element, where the first child has an index value of 0.

<div id="root">
    <h1 id="title">JS DOM navigation Tutorial</h1>
    <p id="disc"><span>You are learning from codestudio.</span></p>
</div>

<script>
var root = document.getElementById("root");

// Check that the element has child nodes
if(root.hasChildNodes()){
    var nodes = root.childNodes;
    
    // Loop through node list and display node name
    for(var i = 0; i < nodes.length; i++) {
        console.log(nodes[i].nodeName);
    }
}else{
    console.log(“No child node”);
}
</script>

 

In the above example, we first check if the root element has any child nodes or not using the hasChildNodes() function to avoid any unexpected error. root.childNodes returns the array of the children of the root element. Thus nodes are the array of children of the root element. We then iterate through all the children using a for loop and print them.

Output:

Console:

#text

H1

#text

P

#text

 

Note:- The childNodes[nodeNumber] returns all child nodes, including non-element nodes like #text and #comment nodes. To get a collection of only elements, we use children property instead. Let’s see the above example again using the children property.

<div id="root">
    <h1 id="title">JS DOM navigation Tutorial</h1>
    <p id="disc"><span>You are learning from codestudio.</span></p>
</div>

<script>
var root = document.getElementById("root");

// Check that the element has child nodes
if(root.hasChildNodes()){
    var nodes = root.children;
    
    // Loop through node list and display node name
    for(var i = 0; i < nodes.length; i++) {
        console.log(nodes[i].nodeName);
    }
}else{
    console.log(“No child node”);
}
</script>

 

Output:

Console:

H1

P

 

Accessing the Parent Nodes

We have parentNode property to access the parent node of a specified node as a Node Object in the DOM tree. Let's try to understand this property using an example.

<div id="root">
    <h1 id="title">JS DOM navigation Tutorial</h1>
    <p id="disc"><span>You are learning from codestudio.</span></p>
</div>

<script>
var disc = document.getElementById("disc");

console.log(disc.parentNode.nodeName); // Print: DIV
</script>

 

In the above example, disc.parentNode.nodeName returns the parent node of disc node i.e. root DIV node.

Note:- In the HTML DOM tree, the document itself is the parent node of the HTML element and is the topmost node. We can directly access this node using document property.

Output:

Console:

DIV

 

The parentNode property can return non element nodes like #text or #comments nodes. To get only the element parent node, we use the parentElement property.

<div id="root">
    <h1 id="title">JS DOM navigation Tutorial</h1>
    <p id="disc"><span>You are learning from codestudio.</span></p>
</div>

<script>
var disc = document.getElementById("disc");

console.log(disc.parentElement.nodeName); // Print: DIV
</script>

 

Output:

Console:

DIV

 

Accessing the Sibling Nodes

We can navigate through the sibling nodes in the DOM tree using the nextSibling and previousSibling properties. nextSibling returns the next Sibling node of the specified node in the DOM tree as a Node Object. Similarly, previousSibling returns the previous Sibling node of the selected node in the DOM tree as a Node Object.

<div id="root">
    <h1 id="title">JS DOM navigation Tutorial</h1>
    <p id="disc"><span>You are learning from codestudio.</span></p><hr>
</div>

<script>
var disc = document.getElementById("disc");

console.log(disc.previousSibling.nodeName); // Print: #text
console.log(disc.nextSibling.nodeName); // Print: HR 
</script>

 

In the above example, we can see that disc.previousSibling.nodeName returns a #text node because of the whitespace available.

Output:

Console:

#text

HR

 

Alternatively, we can use the previousElementSibling and nextElementSibling to get the previous and next sibling element ignoring any whitespace text and comment nodes.

<div id="root">
    <h1 id="title">JS DOM navigation Tutorial</h1>
    <p id="disc"><span>You are learning from codestudio.</span></p><hr>
</div>

<script>
var disc = document.getElementById("disc");

console.log(disc.previousElementSibling.nodeName); // Print: H1
console.log(disc.nextElementSibling.nodeName); // Print: HR 
</script>

 

Output:

Console:

H1

HR

 

Type of Node in DOM

The nodeType property is read-only, and it returns the type of a node. Every node has nodeType property. In this section, we will see the most important types of DOM nodes.

ConstantValueExample
ELEMENT_NODE1<h1 class="title">Coding Ninja</h1>
ATTRIBUTE_NODE2class="title" (depriciated)
TEXT_NODE3Coding Ninja
COMMENT_NODE8<!-- This is a comment -->
DOCUMENT_NODE9The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE10<!Doctype html>

 

Frequently Asked Questions

1. What is DOM?

Ans. The Document Object Model is a standard platform and language-independent object model and programming interface for HTML or XML Documents.

2. What is the DOM tree?

Ans. All parts of the document in DOM, such as elements, text, attributes, images, etc., are organised in a hierarchical tree-like structure, this is known as the DOM tree.

Key Takeaways

In this article, we learned DOM navigation using javascript between the nodes of the DOM tree. 

  • We learned DOM navigation for child node using various node properties like firstChild, lastChild, childNodes[nodeNumber], children[nodeNumber], etc.,
  • DOM navigation for parent nodes can be done using parentNode and parentElement property.
  • DOM navigation among sibling nodes can be done by nextSiblingpreviousSiblingnextElementSibling and previousElementSibling.

 

If you want to learn advanced web development, Coding Ninjas has one of the best courses available, which you can find here.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think