Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «DOM-дерево». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**DOM (Document Object Model) це об'єктна модель HTML-документа, тобто структура вебсторінки у вигляді дерева об'єктів, з якою може працювати JavaScript.** Кожен тег стає об'єктом, а вкладеність тегів перетворюється на ієрархію вузлів.

## Теорія

### TL;DR

- DOM це внутрішнє представлення сторінки в пам'яті браузера, а не сам HTML-файл.
- Кожен тег це об'єкт (вузол), вкладеність тегів це дерево.
- HTML статичний, DOM динамічний: JavaScript може читати, змінювати, створювати і видаляти вузли.
- Типи вузлів: `Document`, `Element`, `Text`, `Comment`, `Attribute`.
- Сучасні способи пошуку вузлів: `querySelector()` і `querySelectorAll()`.
- Зміна DOM одразу відображається на сторінці, файл HTML при цьому не змінюється.

### Швидкий приклад

Простий HTML:

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

Коли браузер завантажує цю сторінку, він перетворює HTML на DOM-дерево:

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

Тобто DOM це представлення HTML-сторінки в пам'яті браузера, де кожен тег це об'єкт, а вкладеність тегів це ієрархія.

### Чим DOM відрізняється від HTML

| Відмінність | **HTML** | **DOM** |
| --- | --- | --- |
| Що це | Текстовий код (розмітка) | Об'єктна модель документа |
| Де існує | У файлі (`.html`) | У пам'яті браузера |
| Формат | Рядки (теги, атрибути) | Об'єкти (вузли, властивості, методи) |
| Чи змінює JS | Ні, HTML це статичний файл | Так, DOM можна змінювати динамічно |
| Приклад | `<p>Hello</p>` | `document.querySelector('p').textContent = 'Hi'` |

Іншими словами: **HTML** це вихідний код сторінки, а **DOM** це жива структура, з якою працюють браузер і JavaScript.

### Типи вузлів у DOM

Кожен елемент DOM-дерева це вузол (node). Типів вузлів кілька:

| Тип вузла | Приклад | Опис |
| --- | --- | --- |
| `Document` | `document` | Корінь дерева |
| `Element` | `<div>`, `<p>` | HTML-теги |
| `Text` | `"Hello"` | Текст усередині тегів |
| `Comment` | `` | Коментарі |
| `Attribute` | `class="title"` | Атрибути елементів |

### Робота з DOM через JavaScript

**1. Отримання елементів**

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

Сучасні способи це `querySelector()` і `querySelectorAll()`.

**2. Зміна вмісту**

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

el.textContent = 'Привіт, світ!';   // змінює текст
el.innerHTML = '<em>Привіт!</em>';  // вставляє HTML
```

**3. Зміна атрибутів і стилів**

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

**4. Створення і додавання елементів**

```javascript
const newDiv = document.createElement('div');
newDiv.textContent = 'Я новий блок';
document.body.appendChild(newDiv);
```

Вузли можна створювати, вставляти і видаляти, тобто динамічно змінювати сторінку.

**5. Видалення елементів**

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

**6. Навігація по дереву**

```javascript
const el = document.querySelector('div');
el.parentElement;       // батьківський елемент
el.children;            // дочірні елементи
el.firstElementChild;   // перший нащадок
el.nextElementSibling;  // сусідній елемент
```

### Динамічна зміна сторінки

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

Тепер список виглядатиме так:

```text
JS
HTML
CSS
```

Підсумок:

| Параметр | **HTML** | **DOM** |
| --- | --- | --- |
| Що це | Розмітка документа | Структура в пам'яті |
| Формат | Текст (теги) | Об'єкти |
| Чи змінює JS | Ні | Так |
| Місце існування | На диску (файл) | У браузері (в пам'яті) |
| Взаємодія | Лише парситься | Можна читати, змінювати, видаляти вузли |

Коротко: DOM це «жива» версія HTML, з якою працює JavaScript. Вона подає сторінку як об'єктне дерево, де вузли можна читати, змінювати і видаляти. Формула для запам'ятовування: HTML це текст, DOM це структура об'єктів, JS це інструмент керування цією структурою.

### Типові помилки

- **Плутати HTML і DOM.** Зміна DOM з JavaScript не змінює `.html` файл на сервері, після перезавантаження сторінки все повернеться до вихідного стану.
- **Вважати, що DOM це точна копія розмітки.** Браузер виправляє помилки розмітки і додає відсутні теги (`html`, `body`, `tbody`), тому дерево може відрізнятися від того, що ви написали.
- **Забувати про текстові вузли.** Пробіли і переноси рядків між тегами теж є вузлами, тому `firstChild` часто повертає текст, а не елемент. Для елементів є `firstElementChild`.
- **Використовувати `innerHTML` для користувацьких даних.** Це шлях до XSS, для тексту треба `textContent`.
- **Шукати елемент до того, як його розібрано.** Скрипт у `<head>` без `defer` виконається раніше за розмітку, і `querySelector` поверне `null`.
- **Змінювати DOM у циклі поелементно.** Кожна вставка змушує браузер перераховувати layout, краще зібрати вузли в `DocumentFragment` і вставити один раз.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати728 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.