Do you think IIT Guwahati certified course can help you in your career?
No
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.
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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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 Coding Ninjas Studio.</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>
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.
Constant
Value
Example
ELEMENT_NODE
1
<h1 class="title">Coding Ninja</h1>
ATTRIBUTE_NODE
2
class="title" (depriciated)
TEXT_NODE
3
Coding Ninja
COMMENT_NODE
8
<!-- This is a comment -->
DOCUMENT_NODE
9
The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE
10
<!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 nextSibling, previousSibling, nextElementSibling and previousElementSibling.
If you want to learn advanced web development, Coding Ninjas has one of the best courses available, which you can find here.