Phase 10 — DOM (Very Important)

Module 37 — DOM Traversing

DOM Traversing is the process of navigating through the Document Object Model (DOM) to access parent, child, and sibling nodes. Instead of repeatedly searching the document using selectors, you can efficiently move from one element to another.

DOM Traversing is widely used in:

• Navigation Menus
• Dynamic Tables
• Todo Applications
• Tree Views
• File Explorers
• Accordions
• Form Validation
• Event Delegation

DOM Traversal Overview

textCopy
1Document
2│
3└── html
4    │
5    └── body
6         │
7         └── div.container
8              │
9              ├── h1
10              ├── p
11              └── ul
12                   ├── li
13                   ├── li
14                   └── li

Traversal allows JavaScript to move through this tree in different directions.

Overview

Sample HTML

htmlCopy
1<div class="container">
2
3    <h2>JavaScript</h2>
4
5    <p>Learn DOM</p>
6
7    <ul>
8
9        <li>HTML</li>
10
11        <li>CSS</li>
12
13        <li>JavaScript</li>
14
15    </ul>
16
17</div>

parentNode

Returns the parent node of an element.

javascriptCopy
1const heading = document.querySelector("h2");
2
3console.log(heading.parentNode);

Output

textCopy
1<div class="container">

parentElement

Returns the parent element.

javascriptCopy
1console.log(heading.parentElement);

In most cases, parentNode and parentElement return the same result for HTML elements.

children

Returns only the child elements as an HTMLCollection.

javascriptCopy
1const container = document.querySelector(".container");
2
3console.log(container.children);

Output

textCopy
1HTMLCollection(3)

Access individual elements:

javascriptCopy
1console.log(container.children[0]);

childNodes

Returns all child nodes, including:

• Element Nodes
• Text Nodes (whitespace/newlines)
• Comment Nodes

javascriptCopy
1console.log(container.childNodes);

Output may include extra text nodes created by formatting in the HTML.

children vs childNodes

firstChild

Returns the first child node.

javascriptCopy
1console.log(container.firstChild);

If there is whitespace before the first element, the result is usually a Text Node.

lastChild

Returns the last child node.

javascriptCopy
1console.log(container.lastChild);

Again, trailing whitespace may result in a text node.

firstElementChild

Returns the first child element.

javascriptCopy
1console.log(container.firstElementChild);

Output

htmlCopy
1<h2>JavaScript</h2>

lastElementChild

Returns the last child element.

javascriptCopy
1console.log(container.lastElementChild);

Output

htmlCopy
1<ul>...</ul>

nextSibling

Returns the next sibling node.

javascriptCopy
1const heading = document.querySelector("h2");
2
3console.log(heading.nextSibling);

This may return a Text Node because of whitespace.

previousSibling

Returns the previous sibling node.

javascriptCopy
1const paragraph = document.querySelector("p");
2
3console.log(paragraph.previousSibling);

nextElementSibling

Returns the next sibling element.

javascriptCopy
1const heading = document.querySelector("h2");
2
3console.log(heading.nextElementSibling);

Output

htmlCopy
1<p>Learn DOM</p>

previousElementSibling

Returns the previous sibling element.

javascriptCopy
1const paragraph = document.querySelector("p");
2
3console.log(paragraph.previousElementSibling);

Output

htmlCopy
1<h2>JavaScript</h2>

Practical Example

HTML

htmlCopy
1<ul id="languages">
2
3    <li>HTML</li>
4
5    <li>CSS</li>
6
7    <li>JavaScript</li>
8
9</ul>

JavaScript

javascriptCopy
1const list = document.getElementById("languages");
2
3console.log(list.firstElementChild.textContent);
4
5console.log(list.lastElementChild.textContent);
6
7console.log(list.children.length);

Output

textCopy
1HTML
2JavaScript
33

Real-World Example — Highlight Current Menu Item

javascriptCopy
1const active = document.querySelector(".active");
2
3const nextMenu = active.nextElementSibling;
4
5if (nextMenu) {
6
7    nextMenu.style.color = "red";
8
9}

Mini Project — DOM Explorer

HTML

htmlCopy
1<div class="card">
2
3    <h2>DOM Traversal</h2>
4
5    <p>Learning JavaScript</p>
6
7    <button>Click</button>
8
9</div>

JavaScript

javascriptCopy
1const card = document.querySelector(".card");
2
3console.log("Parent:");
4
5console.log(card.parentElement);
6
7console.log("Children:");
8
9console.log(card.children);
10
11console.log("First Element:");
12
13console.log(card.firstElementChild);
14
15console.log("Last Element:");
16
17console.log(card.lastElementChild);
18
19console.log("Second Child:");
20
21console.log(card.children[1]);

Common Mistakes

Using firstChild Instead of firstElementChild

❌ Wrong

javascriptCopy
1console.log(container.firstChild);

This often returns a Text Node because of whitespace.

✅ Better

javascriptCopy
1console.log(container.firstElementChild);

Confusing children and childNodes

Use:

• children when working only with HTML elements.
• childNodes when you need text and comment nodes as well.

Using nextSibling Instead of nextElementSibling

❌ Wrong

javascriptCopy
1heading.nextSibling.style.color = "red";

The next sibling may be a text node.

✅ Correct

javascriptCopy
1heading.nextElementSibling.style.color = "red";

Best Practices

• Prefer parentElement over parentNode when working with HTML elements.
• Use children instead of childNodes when you only need element nodes.
• Use firstElementChild and lastElementChild to avoid whitespace-related issues.
• Use nextElementSibling and previousElementSibling for reliable sibling navigation.
• Traverse the DOM instead of repeatedly calling querySelector() for better performance.

Interview Questions

Q1. What is the difference between parentNode and parentElement?

• parentNode returns the parent node, which could be an element, document, or document fragment.
• parentElement returns only the parent element and returns null if the parent is not an element.

Q2. What is the difference between children and childNodes?

• children returns only element nodes.
• childNodes returns all node types, including text and comment nodes.

Q3. Why should you use firstElementChild instead of firstChild?

firstElementChild skips text nodes created by whitespace, making it more reliable for working with HTML elements.

Q4. What is the difference between nextSibling and nextElementSibling?

• nextSibling may return a text node or comment node.
• nextElementSibling always returns the next HTML element.

Summary

In this module, you learned how to navigate the DOM using parent, child, and sibling traversal properties. You explored parentNode, parentElement, children, childNodes, firstChild, lastChild, firstElementChild, lastElementChild, nextSibling, previousSibling, nextElementSibling, and previousElementSibling. Mastering these traversal techniques helps you build efficient, maintainable, and high-performance JavaScript applications.

Next Module: Module 38 — DOM Events, where you'll learn addEventListener(), mouse events, keyboard events, form events, event bubbling, capturing, delegation, and advanced event handling used in professional frontend development.