Объектная модель документа (DOM): как HTML превращается в дерево узлов

Как браузер читает HTML? 🌐

Когда вы открываете веб-страницу, браузер проделывает магическую работу — превращает «плоский» HTML в интерактивную структуру. Этот процесс называется парсингом, а результат — DOM-деревом (Document Object Model).

<!-- Пример простого HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет, DOM!</h1>
    <p>Это абзац текста</p>
  </body>
</html>

Что такое DOM? 🌳

DOM — это программное представление HTML-документа в виде дерева объектов. Каждый элемент, атрибут и даже текст становятся узлами (nodes):

Документ (Document): Корень дерева
Элементы (Element nodes): <html>, <body>, <div> и т.д.
Текстовые узлы (Text nodes): Содержимое элементов
Атрибуты (Attribute nodes): class, id и др.

// Пример доступа к DOM через JavaScript
const heading = document.querySelector('h1');
console.log(heading.textContent); // Выведет: "Привет, DOM!"

Как строится DOM-дерево? 🔨

Браузер проходит 4 ключевых этапа:

Токенизация: Разбивает HTML на «кирпичики» (теги, атрибуты)
Построение дерева: Создаёт узлы и связывает их по вложенности
Построение CSSOM: Аналогично для стилей (CSS Object Model)
Рендеринг: Комбинация DOM + CSSOM → отрисовка на экране

Практика: изучаем DOM вживую 🛠️

Откройте Инструменты разработчика (F12) → вкладка Elements. Вы увидите:

Древовидную структуру
Возможность редактировать узлы «на лету»
Иерархию родительских и дочерних элементов

Попробуйте! Правой кнопкой → Inspect на любом элементе страницы.

DOM ≠ HTML: ключевые отличия ⚡

DOM — живой. Изменения в JS обновляют DOM мгновенно (но не исходный HTML-файл).
Дополнительные узлы. Браузер может добавить служебные элементы (например, tbody в таблицах).
Исправление ошибок. Браузер «чинит» плохой HTML (например, незакрытые теги).

<!-- Браузер исправит это -->
<p>Незакрытый абзац
<p>Другой абзац

<!-- На выходе DOM будет корректным -->
<p>Незакрытый абзац</p>
<p>Другой абзац</p>

Работа с DOM: основы манипуляций 🎮

Вот что можно делать через JavaScript:

// 1. Поиск элементов
const list = document.getElementById('myList');

// 2. Создание узла
const newItem = document.createElement('li');
newItem.textContent = 'Новый элемент';

// 3. Добавление в DOM
list.appendChild(newItem);

// 4. Удаление узла
list.removeChild(newItem);

// 5. Изменение стилей
newItem.style.color = 'red';

Почему это важно? 🚀

Понимание DOM необходимо для:

Динамических интерфейсов: Добавление/удаление элементов
Анимаций: Плавные изменения свойств
Отладки: Анализ структуры через DevTools
Оптимизации: Минимизация перерисовок страницы

Попробуйте прямо сейчас: откройте консоль (Ctrl+Shift+J) и измените что-нибудь на этой странице через document!

Глубже в тему 📚

Для продвинутого изучения рекомендую:

DOM Living Standard (спецификация)
Разборы манипуляций с DOM от Данилы Бежина: https://www.youtube.com/@DanilaBezhin
Практику в CodePen с реальными примерами