DOM Navigation

By the end of this lesson, you will be able to move through the DOM by selecting an element and walking to its parent, children, and siblings using JavaScript.

What it is

The DOM is a tree of nodes. Elements are arranged like a family: a parent contains other elements, those contained elements are its children, and elements that share the same parent are siblings. DOM navigation means starting from one element and moving through this tree instead of searching the whole document again.

Related terms include parentNode, parentElement, children, childNodes, firstElementChild, lastElementChild, nextElementSibling, and previousElementSibling.

Why it matters

• You can update a list item’s parent without giving every element an id.
• You can find the next or previous item in a menu, table row, or card list.
• You can remove or replace a child element from its container.
• You can build small interactions such as highlighting a sibling when one element is clicked.
• You can write code that works even when the page structure changes slightly.

Syntax or steps

The smallest useful pattern is: select one element, then move from it.

1. Select a starting element.
2. Move up with parentElement.
3. Move down with children or firstElementChild.
4. Move sideways with nextElementSibling or previousElementSibling.

const el = document.querySelector('#target');
const parent = el.parentElement;
const kids = el.children;
const next = el.nextElementSibling;

Example

<ul id="menu">
  <li>Home</li>
  <li id="current">About</li>
  <li>Contact</li>
</ul>

<script>
const current = document.getElementById('current');

console.log(current.parentElement.id);
console.log(current.children.length);
console.log(current.previousElementSibling.textContent);
console.log(current.nextElementSibling.textContent);
</script>

Part by part: current is the li with id="current". current.parentElement.id moves up to the ul and reads its id, which is menu. current.children.length checks how many element children the li has; it has none, so the result is 0. previousElementSibling moves left to the Home item, and nextElementSibling moves right to the Contact item.

Common mistakes

• Using childNodes when you mean children. childNodes includes text nodes and whitespace, while children returns only element children.
• Assuming children is an array. It is a live HTMLCollection. If you need array methods, convert it with Array.from(el.children).
• Forgetting that a sibling may not exist. If there is no next element, nextElementSibling returns null, so check before reading textContent.
• Confusing parentNode with parentElement. parentNode can return any node, while parentElement returns only an element parent or null.

When to use it

DOM navigation is best when you already have an element and need to move relative to it. Selector queries are better when you know the target by CSS pattern.

Practice

Guided exercise: given this markup, log the parent tag name and the next sibling text.

<ol>
  <li class="item">First</li>
  <li>Second</li>
</ol>

const item = document.querySelector('.item');
console.log(item.parentElement.tagName);
console.log(item.nextElementSibling.textContent);

Expected output: OL and Second.

Challenge: starting from the last li, log the text of the first child of its parent. Hint: use parentElement and firstElementChild.

const last = document.querySelector('ol li:last-child');
console.log(last.parentElement.firstElementChild.textContent);

Quick check

Which property returns only element children of an element?

Answer: children.

Summary

DOM navigation lets you move through the page tree from a known element to its relatives. Use parent, child, and sibling properties when the relationship matters more than the exact selector.