Overview
The Document Object Model (DOM) is an in-memory representation of an HTML or XML document that organizes content as a hierarchical tree of nodes. Each node corresponds to parts of the document such as elements, attributes, text, comments, and processing instructions. The DOM provides a programmatic API that lets scripts read, navigate, add, remove, and change nodes so dynamic web pages and applications can respond to user interaction, data updates, and other events.
Structure and API
At its core the DOM treats a document as a tree rooted at a Document node. Element nodes represent tags, Text nodes carry textual content, and Attribute nodes describe element properties. Common methods and properties exposed by the API include:
- querySelector / querySelectorAll, getElementById, getElementsByTagName — to find nodes
- createElement, createTextNode, cloneNode — to construct nodes
- appendChild, insertBefore, removeChild, replaceChild — to change structure
- addEventListener, dispatchEvent — to handle events
History and Standards
The DOM evolved from early browser APIs into formal recommendations by standards bodies. W3C published DOM specifications to unify implementations, and WHATWG continues to maintain HTML-related interfaces. The specification defines how scripts should interact with documents; implementations in browsers provide concrete objects and behaviors. For further reading see the DOM specification.
Uses and Examples
Developers rely on the DOM for tasks such as updating content dynamically, validating forms, manipulating styles and attributes, creating single-page applications, and enabling accessibility features. Testing tools, server-side renderers, and browser automation frameworks also use DOM representations to inspect and control pages.
Distinctions and Notable Facts
The DOM is distinct from the source text of an HTML file: it is the runtime object model after the browser parses markup. Modern frameworks sometimes introduce a virtual DOM — an in-memory abstraction used to compute efficient updates before applying changes to the real DOM. The DOM exposes live collections and mutation observers that help detect and react to changes, but direct DOM operations can be expensive, so many applications batch updates for performance.