Що таке DOM і як браузер перетворює HTML на структуру сторінки?

1. Що таке DOM простими словами і навіщо браузеру взагалі створювати його?

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

Браузер створює DOM із завантаженого з сервера HTML-коду для того, щоб програма (зокрема JavaScript) мала змогу швидко й динамічно маніпулювати вмістом сторінки: шукати потрібні елементи, додавати нові, змінювати текст, атрибути, CSS-стилі та реагувати на дії користувача.

2. Чим HTML-код сторінки відрізняється від DOM, який створює браузер?

HTML-код — це статична «сира» текстова розмітка (або «креслення»), яка надходить від сервера у вигляді файлу з тегами. Сам по собі HTML-код є незмінним і не може реагувати на дії відвідувача.

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

3. Що відбувається після того, як браузер отримує HTML від сервера?

Отримання байтового потоку (HTML bits): Сервер надсилає дані у вигляді послідовності байтів (0 та 1).

Токенізація (Tokenization): Токенаізер перетворює байти на окремі зрозумілі символи/токени (наприклад, відкриваючі й закриваючі теги).

Парсинг та побудова DOM-дерева: HTML-парсер обробляє токени й будує ієрархічне DOM-дерево. Паралельно завантажуються та обробляються стилі для побудови CSSOM.

Формування Render Tree: DOM та CSSOM об'єднуються у дерево рендерингу (Render Tree), куди потрапляють виключно видимі на екрані елементи.

Layout (Reflow) та Paint: Браузер обчислює точну геометрію, розміри та позицію кожного елемента, після чого растризує (малює) пікселі на екрані.

Виконання JavaScript: Скрипти виконуються та можуть у реальному часі змінювати структуру DOM-дерева.

4. Що таке HTML parsing і як під час нього формується DOM tree?

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

Під час парсингу браузер враховує вкладеність тегів і створює між ними ієрархічні зв'язки. Якщо код містить помилки або пропущені теги, браузер виконує автокорекцію: він самостійно обгортає вміст у теги <html> чи <body>, якщо їх немає, або додає обов'язковий тег <tbody> у таблиці.

5. Що таке node та element у DOM?

Node (вузол) — це найзагальніший базовий тип об'єкта в DOM-дереві. Вузлом у DOM є абсолютно все: сам документ (Document), елементи (Element), текстові фрагменти (Text), коментарі (Comment), атрибути (Attr) та навіть директива DOCTYPE.

Element (елемент) — це конкретний тип вузла (Element Node з nodeType === 1), який відповідає безпосередньо HTML-тегам (наприклад, <div>, <p>, <a>, <span>). Кожен елемент є вузлом, але не кожен вузол є елементом (наприклад, текстовий вузол #text чи коментар #comment є вузлами, але не є елементами).

6. Що означають parent, child і sibling у структурі DOM?

Ці терміни описують відносні ієрархічні зв'язки між вузлами в дереві:

Parent (батьківський вузол): вузол, всередині якого безпосередньо міститься інший вузол (наприклад, <body> є батьком для <main>).

Child (дочірній вузол): вузол, розташований безпосередньо всередині батьківського (наприклад, <h1> є дитиною для <header>).

Sibling (сусідній вузол / «брат» чи «сестра»): вузли, що лежать на одному рівні вкладеності й мають одного спільного безпосереднього батька (наприклад, <header> та <main> усередині <body>).

7. Як виглядає DOM-дерево для простої HTML-сторінки?

Для сторінки з елементами html, head, title, body, header, h1, main, p ієрархія DOM має такий вигляд:

Document (корінь усього документа)

DocumentType: html

Element: <html> (кореневий елемент / root node)

Element: <head>

Element: <title>

Text: "Заголовок вкладки"

Element: <body>

Element: <header>

Element: <h1>

Text: "Головний заголовок"

Element: <main>

Element: <p>

Text: "Основний текст сторінки"

(Примітка: у реальному DOM між елементами також створюються проміжні текстові вузли #text, які містять пробіли та перенесення рядків з HTML-коду).

8. Як JavaScript знаходить, читає, додає, змінює або видаляє елементи DOM?

Знаходження елементів:

document.getElementById('id') — найшвидший пошук за унікальним атрибутом id.

document.querySelector('selector') / querySelectorAll('selector') — універсальний пошук за будь-яким CSS-селектором.

document.getElementsByClassName() / getElementsByTagName() — пошук за класом або назвою тегу.

Читання та зміна контенту й стилів:

element.textContent або element.innerHTML — зчитування чи перезапис тексту/HTML.

element.setAttribute('attr', 'val') / getAttribute() — керування атрибутами.

element.style.color = 'red' або element.classList.add('active') — зміна зовнішнього вигляду.

Створення та додавання:

document.createElement('tagName') — створення нового елемента.

parent.appendChild(child) / append() / prepend() — вставка елемента в потрібне місце дерева.

Видалення:

element.remove() або parent.removeChild(child) — повне вилучення вузла з DOM-дерева.

9. Чим початковий HTML може відрізнятися від фінального DOM після виконання JavaScript?

Автоматичні виправлення: Браузер на етапі парсингу додає закриваючі теги чи відсутні контейнери (наприклад, <tbody> у таблицях).

Динамічні маніпуляції: Скрипти JavaScript можуть створювати нові блоки, видаляти елементи, модифікувати класи, атрибути або переписувати вміст сторінки на льоту.

Завантаження даних (AJAX / SPA): В односторінкових додатках (SPA) початковий HTML може містити лише один порожній <div id="root"></div>, а весь решта вмісту будується в DOM через JavaScript після запиту даних із сервера.

Різниця між атрибутами та властивостями: Наприклад, якщо користувач вводить текст у поле <input value="default">, значення властивості DOM-об'єкта (input.value) змінюється на нове, але початковий атрибут HTML (getAttribute('value')) залишається старим.

10. Чому розуміння DOM важливе для frontend, rendering, accessibility та technical SEO?

Frontend & JavaScript: DOM є програмним містком (API) між JavaScript та візуальним інтерфейсом. Без розуміння DOM неможливо створювати інтерактивні веб-додатки та обробляти події користувачів.

Rendering & Performance: Зміна елементів у DOM змушує браузер виконувати операції Reflow (Layout) та Repaint. Неоптимальна робота з DOM уповільнює сайт; знання таких інструментів, як DocumentFragment, дозволяє групувати оновлення й уникати просідання швидкості.

Accessibility (Доступність): Асистивні технології (наприклад, екранні читачі для людей з вадами зору) аналізують саме DOM-дерево для озвучення вмісту й забезпечують навігацію з клавіатури.

Technical SEO: Пошукові роботи (Googlebot) сканують підсумковий DOM після виконання JavaScript. Якщо важливі посилання, метатеги або текстовий контент відсутні у DOM-дереві чи генеруються із затримкою/помилками, це перешкоджає коректній індексації та ранжуванню сторінки в пошукових системах.