Що таке дерево DOM?

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

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

Приклад:

Ось простий HTML:

javascript

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

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

javascript

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; // сусідній елемент

Приклад: динамічна зміна сторінки

javascript

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

Тепер список стане:

javascript
JS HTML CSS

Підсумок

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

Коротко:

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

Формула для запам'ятовування: HTML - це текст, DOM - це структура об'єктів, JS - це інструмент для керування цією структурою.

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

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

Premium

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