DOM-дерево

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

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`	`<!-- 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>

<script>
  const list = document.getElementById('list');
  const li = document.createElement('li');
  li.textContent = 'CSS';
  list.appendChild(li);
</script>

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

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 і вставити один раз.

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

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

Premium

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