Nodette saysThe DOM is the live tree of objects representing the page that JS can read and change.
The browser parses HTML into the Document Object Model — a tree of nodes you reach through the global document. Every element, attribute, and text node is an object you can inspect and modify; changes show on screen immediately. DOM scripting is how pages become interactive.
Power-ups you unlock
DOM = live object tree of the page
Reached via the global document
Changing the DOM updates the screen
Elements, attributes, text are all nodes
The Event Bubbler attacks — common mistakes
Running DOM code before the DOM exists
Confusing the HTML source with the live DOM
Excessive DOM reads/writes causing layout thrash
Boss battleRead document.title and change an element’s text via the DOM.
Example code
<!doctype html><html><head><meta charset="utf-8"><title>DOM</title></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><h1 id="h">before</h1>
<script>document.getElementById('h').textContent='after · title is "'+document.title+'"';</script></body></html>