Різниця між DOM і HTML

JavaScriptJunior~3 хв читання

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 до завершення парсингу. Скрипт, що виконався раніше за розмітку, просто не побачить потрібних вузлів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.