The Old NetISSUE #29 of 60

document object · entry to the dom

Pixel PeteVSQuirks Mode

Pixel Pete saysThe document object is the script’s entry point into the page.

document is the root handle for everything: query methods (getElementById, querySelector), creation (createElement), the body/head references, cookie, title, and lifecycle (readyState, DOMContentLoaded). Nearly every DHTML operation starts by reaching into document.

Power-ups you unlock

document = entry point to the page
Query, create, and reference nodes through it
Holds title, body, head, cookie
Lifecycle: readyState, DOMContentLoaded

Quirks Mode attacks — common mistakes

Running document code before the DOM is ready
Confusing document with window
Touching document.body before it exists

Boss battleWait for DOMContentLoaded, then read document.title and modify the body.

Example code

<!doctype html><html><head><meta charset="utf-8"><title>Doc</title></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>document.getElementById('o').textContent='title="'+document.title+'"';</script></body></html>

▶ Open the interactive comic issue

‹ Dom Node Types · Element · Text · Attribute · Comment Window Object · The Global Container ›