The DOM Navigation

Here, we are going to learn about the DOM (Document Object Model) Navigation using HTML and JavaScript.
Submitted by Siddhant Verma, on October 22, 2019

We know that whenever a web browser loads a web page, it renders an HTML DOM which is a tree-like data structure that is manipulated using JavaScript. This tree is generic and is usually called the node tree where each HTML DOM element represents a node. Starting from any random node in the node tree you can traverse the tree and reach any other node using the tree node relationships. These relationships define the relations between various HTML elements on the web page.

In this article, we'll look at how we can navigate the DOM by utilizing the relationship between various nodes in the node tree.

Let's familiarise ourselves with some DOM standards set by W3C. The entire document that the browser loads is itself a node and is called the document node. Inside this document or under this document node, various branches point towards other nodes which are the HTML element nodes. Any text or content embedded in these HTML tags is the text nodes.

Regarding this simple DOM in the example, go ahead and create a similar index.html file with the following HTML,

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Events in DOM</title>

</head>

<body>

    <a href="">some link</a>
    <h1>Hello world</h1>

</body>
<script>
</script>

</html>

Output

We know that the nodes in the tree have a hierarchical relationship so we can easily deduce the node tree relationships which will eventually help in navigating the DOM. The most common tree node relationships are parent, child, and sibling.

Our document node is the root node and it has two children, the <head> and the <body>. This document node is the root node as well as the parent node for its children <head> and <body>. The <head> has a <title> which is again a child node for the <head>, being the parent node for its child text node.

The <body> is the parent node for it's two children <a> and <h1>. These children nodes themselves are siblings to one another and are parent nodes for their children's content or text nodes.

Alright now let's navigate the DOM using these relationships that we have defined.

Let's get a reference to the <head> and <body> first.

<script>
	const head = document.querySelector('head');
	const body = document.querySelector('body');
	console.log('head: ', head);
	console.log('body: ', body);
</script>

Output

head:  <head>…</head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="styles.css"><title>Events in DOM</title></head>
body:  <body cz-shortcut-listen="true">…</body>
<a href>some link</a><h1>Hello world</h1><!-- Code injected by live-server --><script type="text/javascript">…</script><script>…</script></body>

We get <head> along with all it's descendants and <body> along with all its descendants.

If we want to access the children of <head>.

console.log('Children of head:',head.children);

Output

Child of head: HTMLCollection(5) [meta, meta, meta, link, title, viewport: meta]

Alternately we can get to the <head> from <title> by getting a reference to <title> and asking for it's parent element.

const title=document.querySelector('title');
console.log('parent of title: ',title.parentElement);

Output

parent of title:  <head> ... </head>

We know that both <a> and <h1> are children of <body> and have a sibling relationship with each other. Let's get a reference to <a> and navigate to <h1> using their sibling relationship.

const link=document.querySelector('a');
console.log('Link: ',link);
console.log('Sibling of <a> :',link.nextElementSibling);

Output

Link:  <a>some link</a>
Sibling of <a> : <h1>Hello world</h1>

Similarly we can get a reference to <h1> and navigate to <a>.

const heading=document.querySelector('h1');
console.log('Heading: ',heading);
console.log('Sibling of <h1> :',heading.previousElementSibling);

Output

Heading:  <h1>Hello world</h1>
Sibling of <h1> : <a>some link</a>

We can also chain these relationships together to navigate the DOM. Let's try to navigate to <h1> from the <title>.

We first get the parent element of <title> which will give us <head>, go to it's next sibling which is <body>, go to it's children which will return us an array of children having <a> and <h1> and simply access the <h1> using the it's index in the children array.

console.log('From <title> to <h1>: ',title.parentElement.nextElementSibling.children[1])

Output

From <title> to <h1>:  <h1>Hello world</h1>

Thus, we can easily navigate the DOM using the DOM tree and create nodes, delete nodes, add children to existing nodes and do all kinds of stuff with JavaScript.

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples