New:Embedded & IoT Bootcamp
Codenexium.com
Tutorial 3 of 11 in series

Walking the DOM

Navigate the DOM tree using parent, child, and sibling properties

Abhishek Sharma 2026-06-10 Web Development / Frontend / JavaScript DOM / Document
27%

Walking the DOM

Once you understand the DOM tree, you need to navigate it. JavaScript provides properties to move between nodes.

DOM Navigation Properties

    ┌─────────────────────────────────┐
    │        parentNode               │
    │             │                   │
    │    ┌────────┴────────┐          │
    │    │   previousSibling │        │
    │    │    ElementNode   ├─────    │
    │    └─────────────────┘          │
    │    ┌─────────────────┐          │
    │    │    nextSibling   │         │
    │    └─────────────────┘          │
    │             │                   │
    │        childNodes               │
    │     ┌──────┼──────┐             │
    │  firstChild │ lastChild         │
    └─────────────────────────────────┘

Walking All Nodes

These properties include all node types (elements, text, comments):

Property Returns
parentNode Parent node
childNodes Collection of all child nodes
firstChild First child node
lastChild Last child node
previousSibling Previous sibling node
nextSibling Next sibling node
Demo: Walking All Nodes
HTML 
<div id='demo'>
<h2>Title</h2>
<p>Paragraph text</p>
<!-- comment -->
<span>Span text</span>
</div>
<pre id='nav-output' style='background:#f1f5f9;padding:8px;border-radius:4px;'></pre>
JavaScript 
const demo = document.getElementById('demo');
const out = document.getElementById('nav-output');

out.textContent =
'parentNode: ' + demo.parentNode.tagName + '\\n' +
'firstChild: ' + (demo.firstChild.textContent.trim() || '(whitespace)') + '\\n' +
'lastChild: ' + (demo.lastChild.textContent.trim() || '(whitespace)') + '\\n' +
'childNodes count: ' + demo.childNodes.length + '\\n' +
'nextSibling: ' + (demo.nextSibling ? (demo.nextSibling.textContent.trim() || '(whitespace)') : 'none');
Live Output Window

Walking Elements Only

These properties skip text and comment nodes - only return elements:

Property Returns
parentElement Parent element
children HTML collection of child elements
firstElementChild First child element
lastElementChild Last child element
previousElementSibling Previous sibling element
nextElementSibling Next sibling element
Demo: Walking Elements Only
HTML 
<ul id='menu'>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<pre id='elem-output' style='background:#f1f5f9;padding:8px;border-radius:4px;'></pre>
JavaScript 
const menu = document.getElementById('menu');
const out = document.getElementById('elem-output');

out.textContent =
'parentElement: ' + menu.parentElement.tagName + '\\n' +
'children count: ' + menu.children.length + '\\n' +
'firstElementChild: ' + menu.firstElementChild.textContent + '\\n' +
'lastElementChild: ' + menu.lastElementChild.textContent + '\\n' +
'nextElementSibling: ' + (menu.nextElementSibling ? menu.nextElementSibling.textContent : 'none');
Live Output Window

Tables and Forms Have Extra Navigation

HTML tables, forms, and lists have special shortcut properties:

Element Properties
<table> rows, tBodies, tHead, tFoot, caption
<tr> cells, sectionRowIndex, rowIndex
<td>/<th> cellIndex
<form> elements
<select> options, selectedIndex
Demo: Table Navigation
HTML 
<table id='scoreboard' border='1' style='border-collapse:collapse;width:100%'>
<tr><th>Player</th><th>Score</th></tr>
<tr><td>Alice</td><td>95</td></tr>
<tr><td>Bob</td><td>87</td></tr>
</table>
<pre id='table-output' style='background:#f1f5f9;padding:8px;border-radius:4px;margin-top:8px;'></pre>
JavaScript 
const table = document.getElementById('scoreboard');
const out = document.getElementById('table-output');

out.textContent =
'Rows: ' + table.rows.length + '\\n' +
'First row cells: ' + table.rows[0].cells.length + '\\n' +
'Row 1, Cell 1: ' + table.rows[0].cells[0].textContent + '\\n' +
'Row 2, Cell 2: ' + table.rows[1].cells[1].textContent;
Live Output Window

Key Takeaways

  • Use childNodes/children depending on whether you want all nodes or just elements
  • Element-only properties (firstElementChild, nextElementSibling) are usually more practical
  • Tables and forms have convenience properties for direct access
  • Navigation can throw errors if the node doesn’t exist - always check with if (node)

Keep learning

Related tutorials from across the library.

All tutorials
Tutorial2026-06-10

Browser Environment & Specs

Understand the JavaScript browser environment - window, DOM, BOM, and ECMAScript

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM
Tutorial2026-06-10

DOM Tree

Understand the DOM tree - how browsers represent HTML as a document tree

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM
Tutorial2026-06-10

Searching Elements

Find DOM elements using getElement*, querySelector*, and more

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM