DOM (Document Object Model)

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

Как выглядит дерево

Для разметки

<!-- HTML -->
<ul id="orders">
  <li>Заказ 101</li>
  <li>Заказ 102</li>
</ul>

браузер построит узел списка с двумя дочерними узлами-пунктами, а внутри каждого пункта — текстовый узел. Корень всего дерева — объект document.

Как с ним работают

// JavaScript
const list = document.querySelector("#orders");
const item = document.createElement("li");
item.textContent = "Заказ 103";
list.append(item);

Код находит список, создает новый пункт и добавляет его в конец — на странице сразу появляется третий заказ. Так же DOM подписывается на события: нажатие, ввод текста, прокрутку.

Почему изменения DOM бывают дорогими

После изменения дерева браузер может пересчитать расположение элементов (reflow) и перерисовать их (repaint). Если менять DOM в цикле по одному элементу, страница начинает тормозить. Поэтому изменения группируют, а библиотеки вроде React сначала вычисляют, что именно изменилось, и вносят в DOM минимум правок. Обход дерева, кстати, — классический пример рекурсии: у каждого узла есть дочерние узлы со своими дочерними.

DOM и доступность

Из DOM браузер строит еще и дерево доступности, которое читают программы экранного доступа для незрячих людей. Поэтому правильные теги важны: настоящая кнопка button будет объявлена как кнопка и сработает с клавиатуры, а «кнопка» из обычного блока с обработчиком нажатия — нет.

Чем DOM не является

DOM — не исходный HTML-файл: если скрипт изменил страницу, «Просмотр кода страницы» покажет исходный HTML, а инструменты разработчика — текущее дерево DOM. И DOM — не только про браузер: тот же стандарт используется для работы с XML-документами в программах на разных языках.