Promissa saysThe document object is the entry point to the page — its content, metadata, and DOM tree.
document represents the loaded page: document.title, document.body/head, the query/create methods (querySelector, createElement), document.cookie, and lifecycle (readyState, the DOMContentLoaded event). It's the root object nearly all DOM work starts from — distinct from window (the global) which contains it.
Power-ups you unlock
document = the loaded page object
title, body, head, querySelector, createElement
readyState + DOMContentLoaded for lifecycle
Lives inside window (the global)
Race Condition Rex attacks — common mistakes
Confusing document (page) with window (global)
Running DOM code before DOMContentLoaded
Touching document.body before it exists
Boss battleWait for DOMContentLoaded, then read document.title and the body’s child count.
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"><p>one</p><p>two</p><pre id="o"></pre>
<script>document.getElementById('o').textContent='title="'+document.title+'" body children='+document.body.children.length;</script></body></html>