Definition
The browser’s tree representation of an HTML document, exposing every element, attribute, and text node to JavaScript for reading and modification—the programming interface between scripts and page content.
Why It Matters
HTML is a static document, but the modern web is a living, breathing application. The DOM matters because it is the “nervous system” of the webpage; it is the bridge that allows code (JavaScript) to reach in and change reality for the user in real-time. Without the DOM, there is no Facebook feed, no interactive maps, and no Google Docs—it is the fundamental interface that turned the internet from a library of papers into a world of software.
Core Concepts
- Node Tree: Document parsed into parent-child node hierarchy.
- Node Types: Element nodes, attribute nodes, text nodes.
- Selection:
getElementById,getElementsByTagName,getElementsByClassName,querySelectorAll. - Modification:
setAttribute,innerHTML,.style.property(camelCase CSS). - Tree Changes:
createElement,createTextNode,appendChild,removeChild.