dom

The Document Object Model (DOM) is a cross-language interface for accessing and manipulating documents. It represents a document as a hierarchical tree of nodes: elements, attributes, text, and other node types. It is defined by W3C standards; browsers implement the HTML DOM binding as part of the WHATWG HTML Living Standard.

Structure and types: The root is the Document node; Elements represent tags; Text nodes hold text content; Attributes are associated with elements; Comments and processing instructions are also nodes. The DOM provides traversal properties (parentNode, firstChild, nextSibling) and collections like NodeList and HTMLCollection.

API and usage: JavaScript in browsers commonly manipulates the DOM. Core operations include selecting nodes (getElementById, querySelector); reading and setting values (textContent, innerHTML, value, setAttribute); creating and inserting nodes (createElement, appendChild, insertBefore); removing nodes (removeChild). Modern APIs include querySelectorAll, classList, and the DOM Range. Event handling via addEventListener; events bubble and can be captured; dispatchEvent to trigger events. MutationObserver detects changes.

Standards and scope: The DOM consists of DOM Core, DOM Traversal, DOM Events, and DOM Mutation Observers; HTML DOM bindings are maintained by WHATWG and W3C; XML DOM provides a similar model for non-HTML documents.

Notes: The DOM is an in-memory representation, not the rendered output; manipulating it can affect layout and performance; cross-origin restrictions limit access to content from different origins.