DOM (Document Object Model)
The browser's live tree of the page, where HTML becomes nodes that JavaScript can inspect, change, and listen to.
See it
What it is
The DOM is the browser's live, object-shaped version of a document, standardized by the W3C in 1998 and now maintained as the WHATWG DOM living standard. Elements, attributes, and text become nodes in a tree rooted at document, and browser APIs such as querySelector, createElement, and append let JavaScript read or change that tree. CSS styles what is in the tree; event listeners make its nodes respond. The Elements panel in Chrome DevTools is a view of this tree, not of your source file.
Reach for the DOM when code must focus an input, measure an element, listen for an event, or integrate something the component framework does not own. It is live, so it can differ from the original HTML source after scripts, browser repairs, or user interaction change it.
Gotcha: the DOM is not the HTML string and it is not the pixels on screen. A hidden element can be in the DOM without being painted. In React, Vue, or Svelte, changing framework-owned nodes by hand can also be overwritten on the next render, so use a ref and keep direct DOM work narrow.
Ask AI for it
Build a small DOM inspector in plain JavaScript. Use document.querySelector to select a preview, document.createElement to add nodes, and MutationObserver to keep a visible tree view in sync when elements, attributes, or text change. Render element and text nodes separately, let the user select a node to see its attributes, and disconnect the observer during cleanup.