The DOM ForestISSUE #4 of 21

traversal · parentNode · children · siblings

NodetteVSThe Event Bubbler

Nodette saysTraverse the tree with parentNode, children, and sibling properties.

From any element: parentElement goes up, children lists element kids, firstElementChild/lastElementChild and nextElementSibling/previousElementSibling move around. Prefer the Element variants over the node ones (childNodes, nextSibling) which include text/whitespace nodes.

Power-ups you unlock

parentElement up; children down
next/previousElementSibling across
Prefer Element* over node variants
Node variants include text/whitespace

The Event Bubbler attacks — common mistakes

Using childNodes and tripping over text nodes
Assuming children includes text
Walking the tree when a selector is simpler

Boss battleFrom a clicked item, style its next sibling.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><ul><li id="a">a</li><li>b</li></ul>
<script>const next=document.getElementById('a').nextElementSibling; next.style.color='#b388ff';</script></body></html>

▶ Open the interactive comic issue

‹ Selecting · QuerySelectorAll · Live Vs Static Creating Elements · CreateElement · AppendChild ›