Suggest an edit

Improve this article

Refine the answer for “What is 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.

---

### Example:

Here is a simple HTML page:

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

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

```javascript
Document
└── html
    └── body
        ├── h1
        │   └── "Hello"
        └── p
            └── "World"
```

> In other words, the DOM is **the browser's in-memory representation of the HTML page**,
> where each tag is **an object**, and the nesting of tags is **a hierarchy (a tree)**.

---

## How the **DOM differs from HTML**

| Difference | **HTML** | **DOM** |
|---|---|---|
| What it is | Text code (markup) | The document's object model |
| Where it exists | 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**.
- **DOM** is **the live structure** the browser and JavaScript work with.

---

## Types of nodes in the DOM

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

| 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 through 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 adding elements

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

> You can create, insert, and remove nodes, thereby **dynamically changing the page**.

---

### 5. Removing elements

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

---

### 6. Navigating the tree

```javascript
const el = document.querySelector('div');
el.parentElement;  // parent
el.children;       // child elements
el.firstElementChild; // first descendant
el.nextElementSibling; // adjacent element
```

---

## Example: dynamically changing a page

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

> Now the list will become:
>
> ```javascript
> JS
> HTML
> CSS
> ```

---

## Summary

| Parameter | **HTML** | **DOM** |
|---|---|---|
| What it is | Document markup | An in-memory structure |
| Format | Text (tags) | Objects |
| Changed by JS | No | Yes |
| Where it exists | On disk (a file) | In the browser (in memory) |
| Interaction | Only parsed | You can read, change, remove nodes |

---

## In short:

> The **DOM** is the "live" version of HTML that JavaScript works with.
> It represents the page as **an object tree**, where nodes can be **read, changed, and removed**.

A formula to remember it by:
**HTML** is text,
**DOM** is a structure of objects,
**JS** is the tool for managing that structure.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.