Document Object Model

Document Object Model (DOM, объектная модель документа) — это программный интерфейс (API), который представляет HTML- или XML-документ в виде древовидной структуры узлов (nodes), где каждый узел соответствует части документа (например, элементу, атрибуту, тексту). DOM позволяет программам и скриптам динамически обращаться к содержимому, структуре и стилям документа, изменять их, а также реагировать на действия пользователя. Модель является кросс-платформенной и языконезависимой: стандарт DOM, разрабатываемый консорциумом World Wide Web Consortium (W3C), определяет интерфейсы, которые могут быть реализованы на любом языке программирования (JavaScript, Python, Java и других). В веб-разработке DOM является основой для динамического взаимодействия с веб-страницами.

История

Концепция объектной модели документа возникла в середине 1990-х годов в связи с развитием динамических веб-страниц. Первые реализации появились в браузерах Netscape Navigator 2.0 (1995 год) и Internet Explorer 3.0 (1996 год), которые предоставляли ограниченный доступ к элементам страницы через объекты document и layer. Однако эти реализации были несовместимы между собой, что затрудняло создание кроссплатформенных решений.

В 1998 году W3C выпустил первую версию стандарта DOM Level 1, которая определила базовую структуру документа и способы навигации по ней. DOM Level 2 (2000 год) добавил поддержку событий, стилей (CSS) и улучшенную работу с пространствами имён XML. DOM Level 3 (2004 год) ввёл методы загрузки и сохранения документов, а также поддержку XPath. В 2015 году W3C начал работу над DOM Living Standard, который развивается как постоянно обновляемый стандарт (совместно с WHATWG). Современные браузеры поддерживают DOM на уровне, близком к этому стандарту.

Архитектура и структура

DOM представляет документ как дерево узлов. Корневым узлом является объект Document, который содержит дочерние узлы: DocumentType (описание типа документа), Element (корневой элемент, например <html>), а также узлы комментариев и текста. Каждый элемент может содержать вложенные элементы, атрибуты и текстовые узлы.

Основные типы узлов

Document — корневой узел, представляющий весь документ.
Element — узел, соответствующий HTML- или XML-тегу (например, <div>, <p>). Имеет имя тега, атрибуты и дочерние узлы.
Attr — узел атрибута элемента (например, class="main"). В современных реализациях атрибуты часто рассматриваются как свойства элемента, а не как отдельные узлы.
Text — текстовое содержимое элемента.
Comment — комментарий в документе ().
DocumentFragment — лёгкий контейнер для временного хранения фрагментов дерева.

Каждый узел имеет свойства для навигации по дереву: parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling. Для элементов доступны также методы поиска: getElementById(), getElementsByClassName(), querySelector(), querySelectorAll().

Интерфейсы

DOM определяет множество интерфейсов, реализуемых узлами. Основные из них:

Node — базовый интерфейс для всех типов узлов.
Element — расширяет Node, добавляет методы работы с атрибутами и дочерними элементами.
HTMLElement — интерфейс для HTML-элементов, добавляет свойства, специфичные для HTML (например, innerHTML, style).
Document — расширяет Node, предоставляет методы для создания новых узлов (createElement(), createTextNode()) и загрузки документов.
EventTarget — интерфейс, позволяющий узлам обрабатывать события (через методы addEventListener(), removeEventListener()).

Функциональность

DOM предоставляет программисту полный контроль над документом. Основные возможности включают:

Навигация по дереву

Доступ к любому узлу документа осуществляется через навигацию по дереву: от корня (document) к дочерним элементам. Например, для получения первого абзаца на странице можно использовать document.querySelector('p') или document.getElementsByTagName('p')[0].

Изменение содержимого

Свойство innerHTML позволяет читать или изменять HTML-содержимое элемента. Свойство textContent — только текстовое содержимое. Методы appendChild(), insertBefore(), removeChild() управляют структурой дерева.

Работа с атрибутами

Методы getAttribute(), setAttribute(), removeAttribute() позволяют читать, устанавливать и удалять атрибуты элементов. В современных браузерах атрибуты также доступны как свойства объекта (например, element.id, element.className).

Обработка событий

DOM поддерживает модель событий, основанную на всплытии (bubbling) и перехвате (capturing). События (клик, нажатие клавиши, загрузка страницы) могут быть назначены любому элементу через addEventListener(). Обработчик события получает объект Event, содержащий информацию о событии (тип, цель, координаты мыши и т.д.).

Стилизация

Свойство style позволяет управлять инлайн-стилями элемента. Для работы с классами используются classList (методы add(), remove(), toggle(), contains()). Доступ к вычисленным стилям осуществляется через getComputedStyle().

Применение

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

Динамическое обновление страницы — изменение содержимого, добавление или удаление элементов без перезагрузки страницы (например, в одностраничных приложениях).
Валидация форм — проверка введённых данных перед отправкой на сервер.
Анимация и визуальные эффекты — изменение стилей элементов в ответ на действия пользователя.
Создание интерактивных интерфейсов — раскрывающиеся меню, модальные окна, слайдеры.
Работа с AJAX — обновление части страницы после получения данных с сервера (через XMLHttpRequest или fetch).

DOM также используется в серверных средах (например, в Node.js с библиотеками вроде jsdom), где позволяет парсить и манипулировать HTML-документами без браузера.

Критика и ограничения

Несмотря на широкое распространение, DOM имеет ряд недостатков:

Производительность — частые изменения дерева (особенно при вставке большого числа элементов) могут вызывать перерисовку страницы (reflow) и снижать быстродействие. Для оптимизации рекомендуется использовать DocumentFragment или пакетные обновления.
Сложность — навигация по глубоко вложенному дереву может быть громоздкой, особенно при работе с большими документами. Современные фреймворки (React, Vue) решают эту проблему через виртуальный DOM.
Безопасность — использование innerHTML с непроверенными данными может привести к XSS-атакам (межсайтовому скриптингу). Рекомендуется использовать безопасные методы (textContent, createTextNode).

Альтернативы и эволюция

В современной веб-разработке DOM часто используется не напрямую, а через абстракции, такие как виртуальный DOM (React, Vue) или теневой DOM (Shadow DOM). Виртуальный DOM представляет собой лёгкую копию реального дерева, с которой производятся изменения, после чего эффективно вычисляется минимальный набор операций для обновления реального DOM. Теневой DOM позволяет инкапсулировать стили и разметку компонентов, изолируя их от остальной страницы.

Источники

World Wide Web Consortium (W3C). «Document Object Model (DOM) Level 1 Specification». 1998.
World Wide Web Consortium (W3C). «DOM Living Standard». 2023.
Flanagan, D. «JavaScript: The Definitive Guide». 7th edition, O'Reilly Media, 2020.
MDN Web Docs. «Document Object Model (DOM)». Mozilla Developer Network.
WHATWG. «DOM Standard». 2023.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →