The Old NetISSUE #31 of 60

accessing elements · getElementById · getElementsByTagName

Pixel PeteVSQuirks Mode

Pixel Pete saysThe classic DHTML lookups were getElementById and getElementsByTagName/ClassName.

Before querySelector, you found nodes with document.getElementById("x") (one element) and getElementsByTagName("li") / getElementsByClassName("card") (live HTMLCollections that auto-update as the DOM changes). They still work and are fast, but the live-collection behavior surprises people — looping while modifying can skip items.

Power-ups you unlock

getElementById → one element by id
getElementsByTagName/ClassName → live collections
Live = auto-updates as the DOM changes
Fast, but live behavior can surprise loops

Quirks Mode attacks — common mistakes

Modifying a live collection while iterating it
Expecting getElementById to take a # prefix
Assuming the collection is a real array

Boss battleGrab all <li> with getElementsByTagName and note it’s a live collection.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><ul><li>a</li><li>b</li></ul><pre id="o"></pre>
<script>const items=document.getElementsByTagName('li');document.getElementById('o').textContent='count='+items.length+' (live)';</script></body></html>

▶ Open the interactive comic issue

‹ Window Object · The Global Container Modern Selecting · QuerySelector · QuerySelectorAll ›