The Old NetISSUE #27 of 60

the dom · the document tree

Pixel PeteVSQuirks Mode

Pixel Pete saysThe DOM is the live, in-memory tree the browser builds from your HTML and exposes to scripts.

When the browser parses HTML, it constructs the Document Object Model — a tree of nodes mirroring your tags. Scripts read and mutate this tree through document, and any change repaints the page. DHTML is fundamentally DOM manipulation: find a node, change it, and the screen updates. Understanding the tree is the whole game.

Power-ups you unlock

DOM = live tree built from your HTML
Reached and mutated via document
Changes to the tree repaint the page
DHTML is fundamentally DOM manipulation

Quirks Mode attacks — common mistakes

Confusing the HTML source with the live DOM
Editing source and expecting live DOM changes to persist
Treating the DOM as a string instead of a tree

Boss battleInspect a page’s DOM tree in DevTools and find one element’s parent and children.

Example code

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

▶ Open the interactive comic issue

‹ What Is Dhtml · Html + Css + Js + Dom Dom Node Types · Element · Text · Attribute · Comment ›