# DOM (Document Object Model)

URL: https://softwaredictionary.org/terms/dom
Category: Web Development
Last updated: 2026-09-29
Pronunciation: DAHM

In short: The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.

## What is the DOM?

When a browser loads an HTML document, it parses the text into a tree of objects called the Document Object Model. Each element, attribute, and piece of text becomes a node in that tree, with parent, child, and sibling relationships that mirror the nesting in the HTML.

The DOM is an API as well as a data structure. JavaScript can use methods like `document.querySelector()` to find nodes, change their text or attributes, add or remove elements, and listen for events such as clicks and key presses. When the DOM changes, the browser updates the screen to match.

A helpful analogy is a family tree: the `<html>` element is the ancestor, `<head>` and `<body>` are its children, and every nested element is a descendant. Editing one node is like updating a single branch without redrawing the whole tree.

The DOM is not the same as your HTML source code. The source is the original text sent by the server, while the DOM is the live, current state of the page after scripts have run, which is why browser developer tools can show elements that View Source does not. Frameworks like React use a virtual DOM, an in-memory copy, to work out the smallest set of real DOM changes needed.

## Key takeaways

- The DOM represents a page as a tree of nodes.
- JavaScript uses DOM APIs to read and modify the page.
- Changes to the DOM are reflected on screen.
- The DOM is the live page state, not the original HTML text.
- A virtual DOM is a framework technique, not part of the browser.

## Example: Adding an item to a list with DOM methods

```javascript
// Find the existing <ul id="todo"> element
const list = document.querySelector("#todo");

// Create a new <li> node and set its text
const item = document.createElement("li");
item.textContent = "Buy milk";

// Insert it into the tree; the page updates immediately
list.append(item);
```

## Frequently asked questions

**Is the DOM part of JavaScript?**

No. The DOM is a web standard implemented by browsers, and JavaScript is the language most often used to access it. Outside the browser, for example in Node.js, there is no DOM unless a library provides one.

**What is the virtual DOM?**

The virtual DOM is a lightweight copy of the page structure kept in memory by some UI frameworks. The framework compares the old and new versions and then applies only the necessary changes to the real DOM.

**What is the difference between the DOM and HTML?**

HTML is the text markup a server sends, while the DOM is the object tree the browser builds from it. Scripts can change the DOM after loading, so the two can differ.

## Sources

- [DOM Living Standard](https://dom.spec.whatwg.org/)

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt