Lesson 10: Traversing the DOM

Learning Objectives

By the end of this lesson, learners will be able to:

• Understand what DOM traversal means
• Use properties like parentNode, childNodes, children, nextElementSibling, and previousElementSibling
• Navigate through the DOM tree dynamically
• Apply traversal techniques to build features like highlighting related elements

Why Learn DOM Traversal?

Once you select an element, you often need to move around the DOM tree:

✅ go to its parent
✅ get its children
✅ move to its siblings

This is called DOM traversal and it is crucial for:

• Building interactive UIs
• Working with lists, tables, menus
• Handling related elements dynamically

Key Properties

Let’s break down the most useful DOM traversal properties:

parentNode

Gives you the immediate parent of an element.

let item = document.getElementById("my-item");
let parent = item.parentNode;

childNodes

Returns all child nodes of an element, including:

• elements
• text nodes
• whitespace

let children = parent.childNodes;

⚠️ Be careful: text nodes and whitespace count too!

children

A cleaner version: returns only child elements, ignoring whitespace/text.

let children = parent.children;

✅ This is usually what you want for working with lists or menus.

nextElementSibling

Gives you the next element on the same level.

let next = item.nextElementSibling;

previousElementSibling

Gives you the previous element on the same level.

let prev = item.previousElementSibling;

Navigating the DOM Tree

Think of the DOM like a family tree:

• parent = your direct ancestor
• child = your kids
• siblings = your brothers/sisters

DOM traversal lets you walk the tree in any direction.

Example: Highlight the Previous List Item

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li id="current">Item 3</li>
  <li>Item 4</li>
</ul>

CSS:

.highlight {
  background-color: yellow;
}

JavaScript:

let current = document.getElementById("current");
let previous = current.previousElementSibling;

if (previous) {
  previous.classList.add("highlight");
}

✅ Result: Item 2 will get a yellow background.
✅ If there is no previous element (for the first item), nothing happens.

Other Traversal Examples

• Highlight the next sibling:

let next = current.nextElementSibling;
if (next) {
  next.classList.add("highlight");
}

• Highlight all children of a parent:

let list = document.querySelector("ul");
for (let item of list.children) {
  item.style.fontWeight = "bold";
}

Practice Challenge

HTML:

<ul id="nav">
  <li>Home</li>
  <li>About</li>
  <li id="active">Contact</li>
  <li>Blog</li>
</ul>

Task:

• Highlight the item before “Contact” in a different color
• Highlight the item after “Contact” with another color

Example JavaScript:

let active = document.getElementById("active");

let prev = active.previousElementSibling;
if (prev) {
  prev.style.color = "green";
}

let next = active.nextElementSibling;
if (next) {
  next.style.color = "blue";
}

Summary