The DOM Explained: What It Is, and Why Every Framework Exists Because of It
The DOM is a live, in-memory tree built from your HTML — knowing it's a tree, not the HTML text itself, is what makes React's whole model click.
The Document Object Model is the actual reason component frameworks exist — the "before React" post in the why-React series described the problem this causes at scale; this post is the missing piece underneath it: what the DOM actually is.
It's a tree, not the HTML source
When a browser parses HTML, it doesn't keep the text around as the source of truth — it builds a live, in-memory tree of node objects, one per element, text node, and comment. `document.getElementById('app')` returns a real object with methods and properties — `.children`, `.style`, `.addEventListener()` — not a string. The HTML you wrote is just the *initial instructions* for building that tree; after the page loads, the DOM can diverge from the original HTML entirely, as JavaScript adds, removes, or mutates nodes.
document.body.children.length; // a live count, reflecting the tree RIGHT NOW
document.querySelector('h1').textContent = 'Changed'; // mutates the tree directlyWhy DOM operations are comparatively expensive
A plain JavaScript object property write is close to free. A DOM node write frequently isn't — depending on what changed, the browser may need to recompute layout for that node and everything affected by it, then repaint pixels (the exact pipeline the next post covers). Reading a layout-dependent property (`.offsetHeight`) can force the browser to synchronously recalculate layout early, right at that line, if a prior write left it "dirty" — a specific, real performance trap called layout thrashing.
Why this is the actual reason React's model exists
Given DOM writes carry a real cost, and given that "UI as a function of state" (from the why-React series) implies potentially many writes per state change, minimizing and batching those real DOM writes is a real engineering problem — which is exactly the problem the virtual DOM and React's diffing algorithm exist to solve. The DOM isn't a minor implementation detail underneath a framework; it's the actual object every rendering strategy in modern frontend is built around managing carefully.