JavaScript - DOM Navigation

In JavaScript, withHTML DOMwe cannavigatethe tree nodes using the relationship between the nodes. Each HTML element is represented as a node in theDOM tree. The HTML document object is represented as root node. There are different types of nodes such asrootnode,parent,childandsiblingnodes. The relationship between these nodes help to navigate the DOM tree.

What are DOM Nodes?

When a webpage gets loaded in the browser, it creates a document object. The ‘document’ object is the root of the web page, and you can access other HTML nodes of the web page.

In the HTML DOM, everything is a node.

• The ‘document’ is a parent node of each node.
• Each HTML element is a node.
• The text inside the HTML element is a node.
• All comments inside the HTML are node is the node.

You can access all nodes of the HTML DOM.

Relationship between HTML DOM Nodes

In the HTML DOM, each node has a relationship with other nodes. Each node is present in the hierarchical structure in the DOM tree.

Here are the terms which we will use in this chapter.

• Root node− The document node is a root node.
• Parent node− Each node has a single parent node. The root node doesn’t have any parent node.
• Child node− Each node can have multiple and nested childrenders.
• Sibling node− The sibling nodes are at the same level, having the same parent node.

Let’s understand the relationship between nodes in the below example.

Example

In the above program,

• <html> is a root node, and it doesn’t have a parent node.
• The <html> node contains two child elements: <body> and <head>.
• The <head> element contains the single child element: <title>.
• The <title> node contains the single <text> node.
• The <body> element contains the single child node: <div>.
• The <div> node contains two child nodes: <h2> and p.
• <h2> and p are siblings.
• The parent of the <h2> and p is <div> node.
• The parent of the <div> node is <body> node.

Navigating Between Nodes Using JavaScript

Navigating between nodes means finding the parent, child, sibling, etc. element of a particular element in the DOM tree.

You can use the below methods and properties to navigate between nodes in the DOM tree.

PropertyDescriptionfirstChildTo get the first child of the particular node. It can also return the text, comment, etc.firstElementChildTo get the first child element. For example, p, <div>, <img>, etc.lastChildTo get the last child of the particular node. It can also return the text, comment, etc.lastElementChildTo get the last child element.childNodesTo get the node list of all children of the particular element.childrenTo get the HTML collection of all children of the particular element.parentNodeTo get the parent node of the HTML element.parentElementTo get the parent element node of the HTML element.nextSiblingTo get the next node from the same level having the same parent node.nextElementSiblingTo get the next element node from the same level having the same parent node.previousSiblingTo get the previous node from the same level having the same parent node.previousElementSiblingTo get the previous element node from the same level having the same parent node.

Below, we will use each method to navigate through the DOM elements.

Accessing the First Child Element

You can access the particular child element using the firstChild or firstElementChild property.

Syntax

Follow the syntax below to use the ‘firstChild’ and ‘firstElementChild’ properties to access the first child element.

element.firstChild;
element.firstChildElement;

Example

In the below code, <div> element contains the text followed by three p elements.

When we use the ‘firstChild’ property, it returns the text node containing the ‘Numbers’ text, and when we use the ‘firstChildElement’ property, it returns the first

element.

Accessing the Last Child Element

You can use the lastChild or lastChildElement properties to access the last child of the particular HTML node.

Syntax

Follow the syntax below to use the ‘lastChild’ and ‘laststElementChild’ properties to access the las=st child element.

element.lastChild;
element.lastChildElement;

Example

In the below code, we have defined the <div> element containing 3 p elements containing the name of the programming languages.

In the output, you can see that the lastElementChild property returns the last p element, and the lastChild property returns the text node of the div element.

Accessing all children of HTML Element

You can use the childNodes property to access the node list of all children elements or the children property to access the HTML collection of all children.

Syntax

Follow the syntax below to access all children elements of the DOM element.

element.children;
element.childNodes;

Example

In the below code, we use the childNodes property to access all child nodes of the <div> element.

In the output, you can see that it also returns the text nodes with undefined text as it contains the text nodes after and before each HTML element node.

Accessing the Parent Node of HTML Element

You can use the parentNode property to access the parent node of the particular HTML node.

Syntax

Follow the syntax below to use the parentNode property.

element.parentNode;

Example

In the below code, we access the <li> element having d equal to ‘blue’ in JavaScript. After that, we use the parentNode property to access the parent node.

It returns the ‘UL’ node, which we can observe in the output.

Accessing the Next Sibling Node

The nextSibling property is used to access the next sibling.

Syntax

Follow the syntax below to use the nextSibling property.

element.nextSibling

Example

In the below code, we have access to the <li> element with an id equal to ‘apple’, and access to the next sibling node using the nextSibling property. It returns the <li> node having the id equal to ‘banana’.

Accessing the Previous Sibling Node

The previousSibling property is used to access the previous sibling node from the DOM tree.

Syntax

Follow the syntax below to use the previousSibling property.

element.previousSibling;

Example

In the below code, we access the previous sibling of the <li> element with an id equal to ‘banana. It returns the <li> element having id equal to ‘apple’.

DOM Root Nodes

The HTML DOM contains two root nodes.

• document.body− It returns the <body> element of the document.
• document.documentElement− It returns the entire HTML document.

Example: Using the document.body

Example: Using the document.documentElement

DOM nodeName Property

The nodeName property of the HTML DOM element is used to get the name of the node, and it has specifications given below.

• It is read−only. You can’t modify it.
• The value of the nodeName property is equal to the tag name in the upper case.
• The node name of the text node is #text.
• The node name of the document node is #document.

Syntax

Follow the syntax below to use the nodeName property to get the name of the node.

element.nodeName;

Example

In the below code, we access the <div> element and use the nodeName property. It returns the tag name in the uppercase.

DOM nodeValue Property

The nodeValue is used to get the value of the, and it has specifications given below.

• It is also a read-only property.
• The node value for the text node is the text itself.
• The node value for the element nodes is null.

Syntax

Follow the syntax below to use the nodeValue property to get the value of the node.

element.nodeValue;

Example

The <div> element contains some text, and the p element in the below code.

The first child element of the <div> element is the text node, and the second child node of the <div> element is the p element.

In the output, you can see that when you use the nodeValue property with the text node, it returns the text. Otherwise, it returns null when you use it with the HTML element node.

Types of Node in DOM

Here, we have given different node types in the HTML DOM.

NodeTypeDescriptionElement Nodes1The element nodes can have child nodes, attributes, and text content. For example, <div>, <a>, etc., are element nodes.Text Nodes3The text nodes can have text content inside the node. For example, text inside the p, <div>, etc. elements.Comment Nodes8The comment nodes contain the comments.Document Nodes9It represents the entire document.Document Type Node10It represents the type of the document. For example, <!Doctype html>

DOM nodeType Property

The nodeType property returns the type of the node as shown in the above table.

Syntax

Follow the syntax below to use the nodeType property to get the type of the node.

element.nodeType;

Example

In the below code, we use the nodeType property to get the type of the node.