The Old NetISSUE #32 of 60

modern selecting · querySelector · querySelectorAll

Pixel PeteVSQuirks Mode

Pixel Pete saysquerySelector/querySelectorAll let you find nodes with any CSS selector.

The modern way: document.querySelector(".card .title") returns the first match for any CSS selector; querySelectorAll returns a static NodeList of all matches. Static means it won't change if the DOM does — the opposite of the old live collections. This unified, selector-based lookup replaced the family of getElementsBy* methods.

Power-ups you unlock

querySelector → first CSS-selector match
querySelectorAll → static NodeList of all
Static = snapshot, not live
Unified selector lookup, the modern default

Quirks Mode attacks — common mistakes

Expecting the static NodeList to update live
Calling array methods directly (convert first)
Forgetting querySelector returns only the first

Boss battleSelect all .item nodes with querySelectorAll and change each one.

Example code

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

▶ Open the interactive comic issue

‹ Accessing Elements · GetElementById · GetElementsByTagName InnerHTML · Setting Markup As A String ›