Skip to main content
Interface Atlas
Guide

DOM: Document Object Model

The structural tree representation of an HTML document that browsers use to render pages and execute JavaScript.

Published

Contents

Definition

The structural tree representation of an HTML document that browsers use to render pages and execute JavaScript.

The Document Object Model (DOM) is an API provided by the browser. When a browser receives an HTML document, it parses the text and constructs a tree of objects (nodes) representing every element, attribute, and piece of text on the page.

Why It Matters

The DOM is the ultimate source of truth for what the user sees. However, updating the DOM directly via JavaScript is computationally expensive. This performance bottleneck is why modern UI libraries (like React or Vue) invented the Virtual DOM—a lightweight, in-memory copy of the tree used to calculate the minimum number of actual DOM updates required.

The Real DOM vs. The Virtual DOM

  • Real DOM: The actual tree maintained by the browser. Reading from it or writing to it triggers expensive layout recalculations and repaints.
  • Virtual DOM: A JavaScript object that mirrors the Real DOM. Frameworks update the Virtual DOM rapidly, compute the “diff”, and then apply only the changed nodes to the Real DOM.