DOM

When you open a web page, your browser first downloads a text file. It states, in a fixed notation, which headings, paragraphs, images, and buttons the page has. The browser reads this text and builds an ordered structure from it in memory. This structure is called the DOM, short for Document Object Model. It’s built like a family tree: at the very top the document, below that larger sections, and below those their individual components. What you see on screen is the rendering of exactly this structure.

Why pages change without reloading

In the past, a web page was like a rigid sheet of paper. If you wanted to see something different, the browser had to fetch the entire page anew from the server. The DOM changed that. Because the page exists as a modifiable structure in memory, a program can swap out individual parts of it. The browser then only redraws what has changed.

This is essentially what practically every modern web application relies on. A like counter jumps from 14 to 15 without the page flickering. A search field shows suggestions while you type. A chat log grows downward as you watch. In every case, the page isn’t reloaded — only the tree in memory is adjusted.

The DOM is also the shared interface that all browsers have agreed upon. A program that modifies the tree therefore works the same way in Chrome, Firefox, and Safari. Without this standard, you would have to write every page separately for every browser.

The page tree and its nodes

Every element of a page is a so-called node in the DOM. A paragraph is a node, an image is a node, and text within a paragraph is a node too. Nodes contain other nodes, which is how the tree structure emerges. As in a family, people speak of parent and child elements. A paragraph that sits within an article section is that section’s child.

The tree is usually modified using JavaScript, the programming language that runs directly in the browser. A program first picks out a node, for instance by its name or an assigned identifier. It can then replace the text inside it, change its color, delete the node, or attach a new one. The browser notices every one of these changes and redraws the page accordingly.

A common misconception: the DOM and the original page text are not the same thing. The text is just the blueprint, the DOM is the finished building. If you look at a page’s source code, you see the earlier blueprint. The current state may look completely different by now, because programs have since rebuilt the tree.

DOM in developer tools, frameworks, and AI agents

You encounter the DOM most directly in your browser’s developer tools. Right-clicking on an element and choosing “Inspect” opens an expandable tree view of the page. There you can rewrite headings or hide elements and see the effect immediately. However, these changes only apply on your end and disappear when the page is reloaded.

In software development, entire toolkits have sprung up around the DOM, so-called frameworks like React or Vue. They take the fine-grained work on the tree off developers' hands and decide for themselves which nodes need to be changed. A well-known buzzword here is virtual DOM: a copy of the tree that is computed against first, before the real tree is touched.

Recently, the DOM has also come to play a role in AI. Programs that independently fill out forms or compare prices online read the page tree instead of interpreting screenshots. Classic web scrapers work this way too. When reports about such agents say they “interact with the page,” this is usually exactly what is meant.