LearnCode.live
Walking the DOM · learncode.live

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):

PropertyReturns
parentNodeParent node
childNodesCollection of all child nodes
firstChildFirst child node
lastChildLast child node
previousSiblingPrevious sibling node
nextSiblingNext 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:

PropertyReturns
parentElementParent element
childrenHTML collection of child elements
firstElementChildFirst child element
lastElementChildLast child element
previousElementSiblingPrevious sibling element
nextElementSiblingNext 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:

ElementProperties
<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)
Courses