Frontend engineering · Basics
Document Object Model
Also called: DOM, DOM tree, DOM nodes
The tree structure the browser builds in memory after parsing HTML. JavaScript uses it to read and change what's on the page.
In detail
HTML is the blueprint on paper; the DOM is the physical model the browser builds from it. Every tag becomes a "node" in the tree, with parent, child, and sibling relationships. For example, body contains header and main, and main contains a heading and a list.
When JavaScript changes the page, like updating some text or hiding a dialog, it's really working with the DOM. React and Vue manage the DOM for you: you just describe "what the page should look like," and the framework figures out the differences and updates it. That's why in framework projects, you generally shouldn't use document.querySelector to change elements directly.
What you see in the Elements panel of the browser's developer tools is the current DOM tree.
Developer infoTerm ID, DOM cues, match priority
- Term ID
eng-dom- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026