The DOM ForestISSUE #2 of 21

selecting · querySelector · getElementById

NodetteVSThe Event Bubbler

Nodette saysSelect elements with querySelector (CSS selector) or getElementById.

document.querySelector(".card") returns the first match for any CSS selector — the flexible go-to. getElementById("x") is a fast, specific lookup by id. Both return a single element (or null). Always handle the null case when an element might not exist.

Power-ups you unlock

querySelector(sel) → first match (any CSS selector)
getElementById(id) → fast id lookup
Both return one element or null
Guard against null before using

The Event Bubbler attacks — common mistakes

Forgetting querySelector returns only the first match
Not checking for null
Passing an id with # to getElementById

Boss battleSelect an element by id and by class, then change both.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><h1 id="t">title</h1><p class="lead">lead</p>
<script>document.getElementById('t').textContent='by id'; document.querySelector('.lead').textContent='by class';</script></body></html>

▶ Open the interactive comic issue

‹ The DOM · The Document Object Model Selecting · QuerySelectorAll · Live Vs Static ›