Suggest an edit

Improve this article

Refine the answer for “The DOM tree”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**The DOM (Document Object Model) is the object model of an HTML document, that is, the structure of a web page as a tree of objects that JavaScript can work with.** Every tag becomes an object, and the nesting of tags turns into a hierarchy of nodes.

## Theory

### TL;DR

- The DOM is the internal representation of a page in the browser's memory, not the HTML file itself.
- Every tag is an object (a node), and tag nesting is a tree.
- HTML is static, the DOM is dynamic: JavaScript can read, change, create and delete nodes.
- Node types: `Document`, `Element`, `Text`, `Comment`, `Attribute`.
- The modern ways to find nodes are `querySelector()` and `querySelectorAll()`.
- A change to the DOM shows up on the page immediately, while the HTML file stays untouched.

### Quick example

A simple HTML page:

```html
<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>
```

When the browser loads this page, it turns the HTML into a DOM tree:

```text
Document
+-- html
    +-- body
        +-- h1
        |   +-- "Hello"
        +-- p
            +-- "World"
```

So the DOM is the representation of the HTML page in the browser's memory, where each tag is an object and the nesting of tags is a hierarchy.

### How the DOM differs from HTML

| Difference | **HTML** | **DOM** |
| --- | --- | --- |
| What it is | Text code (markup) | The object model of the document |
| Where it lives | In a file (`.html`) | In the browser's memory |
| Format | Strings (tags, attributes) | Objects (nodes, properties, methods) |
| Changed by JS | No, HTML is a static file | Yes, the DOM can be changed dynamically |
| Example | `<p>Hello</p>` | `document.querySelector('p').textContent = 'Hi'` |

In other words: **HTML** is the source code of the page, while the **DOM** is the live structure the browser and JavaScript work with.

### Node types in the DOM

Every element of the DOM tree is a node. There are several node types:

| Node type | Example | Description |
| --- | --- | --- |
| `Document` | `document` | The root of the tree |
| `Element` | `<div>`, `<p>` | HTML tags |
| `Text` | `"Hello"` | Text inside tags |
| `Comment` | `` | Comments |
| `Attribute` | `class="title"` | Element attributes |

### Working with the DOM from JavaScript

**1. Getting elements**

```javascript
document.getElementById('id');
document.getElementsByClassName('class');
document.getElementsByTagName('p');
document.querySelector('.class');
document.querySelectorAll('p');
```

The modern ways are `querySelector()` and `querySelectorAll()`.

**2. Changing content**

```javascript
const el = document.querySelector('h1');

el.textContent = 'Hello, world!';   // changes the text
el.innerHTML = '<em>Hello!</em>';   // inserts HTML
```

**3. Changing attributes and styles**

```javascript
el.id = 'title';
el.setAttribute('data-role', 'main');
el.style.color = 'red';
el.classList.add('active');
```

**4. Creating and appending elements**

```javascript
const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new block';
document.body.appendChild(newDiv);
```

Nodes can be created, inserted and removed, which is how a page is changed dynamically.

**5. Removing elements**

```javascript
const p = document.querySelector('p');
p.remove();
```

**6. Navigating the tree**

```javascript
const el = document.querySelector('div');
el.parentElement;       // the parent
el.children;            // the child elements
el.firstElementChild;   // the first child
el.nextElementSibling;  // the next sibling
```

### Changing a page dynamically

```html
<ul id="list">
  <li>JS</li>
  <li>HTML</li>
</ul>

The list now looks like this:

```text
JS
HTML
CSS
```

Summary:

| Property | **HTML** | **DOM** |
| --- | --- | --- |
| What it is | Document markup | A structure in memory |
| Format | Text (tags) | Objects |
| Changed by JS | No | Yes |
| Where it exists | On disk (a file) | In the browser (in memory) |
| Interaction | It is only parsed | Nodes can be read, changed and deleted |

In short: the DOM is the live version of the HTML that JavaScript works with. It presents the page as a tree of objects whose nodes can be read, changed and deleted. A formula to remember: HTML is text, the DOM is a structure of objects, JS is the tool that drives that structure.

### Common mistakes

- **Confusing HTML and the DOM.** Changing the DOM from JavaScript does not change the `.html` file on the server; a reload brings everything back to the original state.
- **Assuming the DOM is an exact copy of the markup.** The browser fixes broken markup and inserts missing tags (`html`, `body`, `tbody`), so the tree can differ from what you wrote.
- **Forgetting about text nodes.** Whitespace and line breaks between tags are nodes too, so `firstChild` often returns text rather than an element. Use `firstElementChild` for elements.
- **Using `innerHTML` for user data.** That is the road to XSS; use `textContent` for text.
- **Looking for an element before it has been parsed.** A script in `<head>` without `defer` runs before the markup exists, and `querySelector` returns `null`.
- **Mutating the DOM node by node in a loop.** Every insertion forces the browser to recalculate layout; collect the nodes in a `DocumentFragment` and insert them once.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts872 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.