The DOM ForestISSUE #3 of 21

selecting · querySelectorAll · live vs static

NodetteVSThe Event Bubbler

Nodette saysquerySelectorAll returns a static NodeList of all matches you can loop over.

document.querySelectorAll(".item") returns every match as a static NodeList — a snapshot that won't update if the DOM changes. It has forEach, but for full array methods spread it ([...list]). Contrast with older live collections like getElementsByClassName, which update automatically.

Power-ups you unlock

querySelectorAll → static NodeList of all matches
Has forEach; spread for full array methods
Static = a snapshot, not live
getElementsByClassName is live by contrast

The Event Bubbler attacks — common mistakes

Expecting the NodeList to update live
Calling map directly (convert first)
Re-querying in a loop instead of caching

Boss battleSelect all list items and uppercase each one.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><ul><li>a</li><li>b</li><li>c</li></ul>
<script>document.querySelectorAll('li').forEach(li=>li.textContent=li.textContent.toUpperCase());</script></body></html>

▶ Open the interactive comic issue

‹ Selecting · QuerySelector · GetElementById Traversal · ParentNode · Children · Siblings ›