DOM
Document Object Model — the browser's in-memory representation of an HTML page as a tree of nodes. JavaScript manipulates the DOM to make pages interactive. The DOM is the bridge between HTML structure and JavaScript logic.
- All web pages (the browser builds it automatically).
- Direct manipulation for simple interactivity.
- Manual DOM updates in large apps (use a framework).
- Non-browser environments.
Definition
The DOM is a tree of nodes representing every HTML element, text node, and attribute. JavaScript APIs (document.getElementById, querySelector, addEventListener) read and modify the DOM. Changes trigger reflow (layout) and repaint (drawing).
Why it exists
To give scripts a structured way to access and manipulate the page content dynamically, enabling interactive web applications.
How it works
The browser parses HTML into a DOM tree. JavaScript can query nodes, change their content/attributes/styles, add/remove nodes, and listen for events. DOM changes trigger the browser to recompute layout and repaint. Frameworks like React abstract direct DOM manipulation with a virtual DOM.
Scaling limits
Direct DOM manipulation is slow at scale (many nodes, frequent updates) — frameworks use virtual DOM diffing or fine-grained reactivity. Large DOMs hurt memory and rendering performance.
Cost shape
Free. The cost is performance: inefficient DOM updates cause jank.
Alternatives
- Virtual DOM — Framework diffing is faster for large UIs but adds a layer.
- Canvas/WebGL — Pixel-level control for graphics, but no DOM semantics.
Failure modes
- Layout thrashing from frequent reflow.
- Memory leaks from unremoved event listeners.
- Slow querySelector on huge DOMs.