DOM
In depthConcept
Also known as: Document Object Model
The tree the browser builds from HTML. JavaScript manipulates the DOM to change the page dynamically.
DOM, explained
Written by EduVerseWhat it is
The DOM (Document Object Model) is the browser’s live, in-memory version of a web page. When the browser reads your HTML, it builds a tree of objects, one for each element, and JavaScript can read and change that tree. When the DOM changes, the browser updates the page on screen to match.
Why teams use it
Without the DOM, a page would be fixed text from the server. Because scripts can add, remove and change elements, you get menus that open, forms that validate as you type and lists that update without a reload. Frameworks like React and Vue still change the DOM in the end; they just work out for you which changes are needed.
An example from work
You attach a click handler using document.getElementById, and the console shows “Cannot read properties of null”. Your script ran before the browser had built that part of the DOM, so the button didn’t exist yet. Moving the script tag to the end of the body, or adding the defer attribute, fixes it.
Our own explanation, not a quote from the book.
In the book
Sentences from The Software Realm, Decoded that mention DOM, exactly as printed.
Senior developer “When the browser loads it, it builds a live tree structure in memory: the DOM.”
Chapter 4 · 4.4.1 The DOM: Your Live Document · pp. 95–96Open in the free preview
1 more passages about DOM in the full book
Read every conversation where DOM comes up, with the interactive slides and demos.
Where it fits
Dynamic web pages, the basis of frontend frameworks
Coverage in the book
Covered in depth: multiple pages with explanations, examples and simulations.
