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

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

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

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

Контент

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

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

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

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

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

**HTML і DOM це різні речі, які просто тісно пов'язані: HTML це текстова розмітка сторінки, а DOM це об'єктна модель цієї сторінки, яку браузер створює в пам'яті після парсингу.** HTML описує, що має бути на сторінці, а DOM дає змогу програмно з цим працювати.

## Теорія

### TL;DR

- HTML це мова розмітки: статичний текстовий документ, який описує структуру і вміст сторінки.
- DOM це об'єктне представлення документа, яке браузер будує після завантаження і парсингу HTML.
- HTML живе у файлі, DOM живе в оперативній пам'яті браузера.
- JavaScript не змінює HTML-файл, він змінює DOM, а браузер перемальовує сторінку.
- HTML це креслення, DOM це жива модель цього креслення.

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

HTML:

```html
<p id="text">Привіт</p>
```

Доступ до DOM через JavaScript:

```javascript
const element = document.getElementById('text');
console.log(element.textContent); // "Привіт"

element.textContent = 'Вітаю!';
```

У HTML нічого не змінилося, але в DOM текст абзацу оновився, і браузер перемалював сторінку.

### Що таке HTML

**HTML (HyperText Markup Language)** це мова розмітки, яка описує структуру і вміст вебсторінки. Це текстовий документ, у якому написано приблизно таке:

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>Привіт, світ!</h1>
    <p>Це приклад сторінки.</p>
  </body>
</html>
```

Він не виконується, а лише описує, які елементи є на сторінці і як вони вкладені один в одного.

### Що таке DOM

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

Наприклад, розмітка вище перетворюється на таку структуру:

```text
Document
+-- html
    +-- body
        +-- h1
        +-- p
```

У JavaScript це доступно як об'єкти:

```javascript
document.body.querySelector('h1').textContent; // "Привіт, світ!"
```

### Ключові відмінності

| Характеристика | **HTML** | **DOM** |
| --- | --- | --- |
| Що це | Текстова розмітка | Об'єктна модель у пам'яті |
| Де існує | У файлі (`.html`) | У браузері (в оперативній пам'яті) |
| Чи змінює JavaScript | Ні, це статичний файл | Так, через API, наприклад `document.querySelector()` |
| Як виглядає | Теги (`<h1>`, `<p>`, ...) | Об'єкти (`document.body`, `element.innerText`, ...) |
| Коли створюється | Пишеться заздалегідь і віддається при завантаженні | Після парсингу HTML браузером |
| Призначення | Опис структури | Робота з цією структурою в коді |

### Коротко

| Що | Визначення |
| --- | --- |
| **HTML** | Мова, що описує структуру сторінки |
| **DOM** | Об'єктна модель HTML, створена браузером |
| **HTML у DOM** | Браузер перетворює теги на дерево об'єктів |
| **JavaScript у DOM** | Дає змогу динамічно змінювати сторінку |

Аналогія: HTML це креслення сторінки, а DOM це «жива модель» цього креслення, яку можна змінювати через JavaScript. Підсумок: HTML це «що написано», DOM це «на що браузер це перетворив і з чим можна працювати програмно».

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

- **Вважати, що зміна DOM править HTML-файл.** Після перезавантаження сторінки всі зміни зникнуть: сервер віддасть той самий вихідний документ.
- **Думати, що DOM це буквальна копія розмітки.** Браузер виправляє помилки розмітки і сам додає відсутні вузли (`html`, `body`, `tbody`), тому дерево може відрізнятися від тексту файлу.
- **Плутати «вихідний код сторінки» і панель Elements у DevTools.** Перший показує HTML, друга показує поточний стан DOM, і після роботи скриптів вони різні.
- **Порівнювати DOM із CSSOM або з деревом рендерингу.** DOM це лише структура документа; рендер-дерево будується з DOM плюс CSSOM і не містить, наприклад, елементів із `display: none`.
- **Читати DOM до завершення парсингу.** Скрипт, що виконався раніше за розмітку, просто не побачить потрібних вузлів.

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

Для рев’юера

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

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