Что такое DOM? — Q&A Хекслет
2026-02-26 23:17 Diff
https://ru.hexlet.io/qna/glossary/questions/chto-takoe-dom

DOM — это объектное представление HTML-документа, которое браузер создает в оперативной памяти после загрузки страницы. В этой модели содержимое страницы описывается как дерево взаимосвязанных узлов, где теги, их атрибуты и текстовые данные существуют в виде отдельных объектов, доступных для программного управления.

DOM используется браузером для построения интерфейса страницы и для последующего изменения ее структуры, содержимого и оформления. Взаимодействие с DOM происходит через JavaScript уже после загрузки HTML, без необходимости повторного обращения к серверу.

Назначение DOM

DOM выполняет две основные функции: формирование визуального представления страницы и управление ее состоянием. Браузер анализирует HTML-разметку, преобразует ее в DOM-дерево и на его основе отображает сайт.

DOM предоставляет возможность:

  • обращаться к любому элементу страницы;

  • изменять текстовое содержимое и атрибуты;

  • управлять стилями элементов;

  • добавлять и удалять узлы;

  • обрабатывать действия пользователя;

  • обновлять интерфейс без перезагрузки страницы.

В отличие от серверных языков, например, PHP, которые формируют HTML до отправки клиенту, JavaScript взаимодействует с уже созданным DOM и изменяет страницу непосредственно в браузере.

DOM API

Для работы с DOM браузеры реализуют DOM API — набор стандартных объектов, методов и свойств, доступных из JavaScript-кода.

DOM API позволяет:

  • находить элементы по тегам, классам и идентификаторам;

  • перемещаться между узлами документа;

  • изменять структуру DOM-дерева;

  • управлять событиями и обработчиками;

  • изменять стили и CSS-классы элементов.

DOM API является частью веб-стандартов и поддерживается всеми современными браузерами.

Структура HTML-документа

HTML-документ имеет строгую иерархию. В ее основе лежит корневой элемент html. Внутри него находятся два обязательных дочерних элемента — head и body.

Тег head

Элемент head содержит служебную информацию, не отображаемую напрямую на странице. В нем размещаются данные, необходимые для корректной работы документа.

В head обычно находятся:

  • meta — кодировка, описание, параметры отображения;

  • title — заголовок страницы;

  • link — подключение CSS и иконок;

  • script— скрипты начальной загрузки.

Тег body

Элемент body содержит все видимое содержимое страницы. Именно его структура формирует основную часть DOM-дерева.

Внутри body часто используются:

  • header — верхняя часть страницы;

  • section — логические блоки контента;

  • footer — нижняя часть страницы;

  • вспомогательные контейнерыdiv`.

Теги header и footer обычно используются один раз, а section может повторяться неограниченное количество раз.

DOM-дерево

DOM-дерево — это иерархическая модель, в которой каждый HTML-элемент является узлом. Узлы связаны между собой отношениями родства.

Основные типы связей:

  • корневой элемент;

  • родительский элемент;

  • дочерний элемент;

  • соседние элементы (siblings).

Корневым элементом всегда является html. Он не имеет родителя, но содержит дочерние элементы head и body. Эти элементы по отношению друг к другу являются сиблингами.

Каждый элемент может иметь любое количество дочерних узлов, которые, в свою очередь, могут содержать собственные вложенные элементы.

Пример иерархии элементов

Структура страницы может быть описана как цепочка вложенностей. Например:

В такой структуре:

  • body — родитель для header и section;

  • header и section — сиблинги;

  • span — конечный элемент без дочерних узлов.

DOM-дерево может быть очень большим и включать сотни или тысячи элементов.

Представление DOM в виде списка

Для упрощения восприятия DOM-дерево часто отображают в виде многоуровневого списка. Каждый уровень отражает глубину вложенности элемента.

Такое представление используется:

  • в инструментах разработчика браузера;

  • при анализе структуры страницы;

  • при поиске ошибок разметки;

  • при оптимизации HTML.

Многоуровневый список позволяет быстро понять, какие элементы вложены друг в друга и как они связаны.

Закрывающиеся и одиночные теги

В HTML существуют теги с обязательным закрытием и одиночные теги. Это напрямую влияет на структуру DOM.

К закрывающимся тегам относятся:

  • div

  • p

  • section

  • header

  • footer

  • заголовки h1–h6

Одиночные теги:

  • img

  • meta

  • link

  • input

  • br

Браузер учитывает эти особенности при построении DOM-дерева.

Наследование свойств

Элементы DOM могут наследовать CSS-свойства от своих родителей. Наследование применяется не ко всем свойствам, но используется широко.

Чаще всего наследуются:

  • цвет текста;

  • шрифт;

  • размер шрифта;

  • видимость;

  • направление текста.

Если свойство задано родительскому элементу, оно автоматически применяется ко всем дочерним, если не переопределено явно. Это упрощает стилизацию и снижает объем CSS-кода.

Работа с DOM и поиск элементов

Большинство операций с DOM сводится к поиску нужных узлов. Эффективная работа невозможна без понимания структуры дерева.

Поиск элементов осуществляется:

  • по идентификатору;

  • по имени тега;

  • по классу;

  • по CSS-селекторам;

  • через переходы между родителями и потомками.

Знание иерархии DOM позволяет точно выбирать элементы и избегать ошибок при изменении страницы.

Просмотр DOM-дерева в браузере

Все современные браузеры предоставляют инструменты разработчика для просмотра DOM-дерева. Они позволяют анализировать структуру страницы в реальном времени.

Возможности инструментов разработчика:

  • просмотр DOM в виде вложенного списка;

  • подсветка элементов на странице;

  • отображение активных и неактивных CSS-свойств;

  • изменение DOM и стилей без перезагрузки;

  • анализ размеров, отступов и позиционирования.

Инструменты разработчика являются основным средством анализа и отладки DOM.

Роль DOM в работе сайта

DOM является центральным связующим звеном между HTML, CSS и JavaScript. Он определяет структуру страницы и позволяет управлять ее поведением.

Без DOM невозможно:

  • динамическое обновление интерфейса;

  • обработка пользовательских действий;

  • интерактивность элементов;

  • создание современных веб-приложений.

Понимание принципов работы DOM необходимо для анализа структуры страниц, корректного взаимодействия со стилями и управления логикой интерфейса.