Открыть сервис
Главная → Блог → Объектная модель документа

Объектная модель документа

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

История

Предпосылки и ранние разработки

До появления стандартизированной модели документа у разных браузеров были собственные, несовместимые способы доступа к элементам веб-страницы. В середине 1990-х годов, с ростом популярности JavaScript и языка сценариев JScript от Microsoft, возникла необходимость в едином подходе. Первые попытки включали объектную модель браузера (BOM), которая предоставляла доступ к окну браузера и его свойствам, но не к самому содержимому документа.

Стандартизация W3C

В 1998 году Консорциум W3C опубликовал первую рекомендацию DOM Level 1. Она определила базовую структуру для представления документов HTML и XML в виде дерева узлов, а также фундаментальные методы для навигации и манипуляции. В 2000 году вышла DOM Level 2, которая расширила API, добавив поддержку событий, пространств имён XML, стилей (CSS) и улучшенную работу с диапазонами (Range). DOM Level 3, опубликованный в 2004 году, ввёл методы для загрузки и сохранения документов (Load and Save), а также более строгую валидацию (Validation). Последующие версии (DOM Level 4 и Living Standard) разрабатываются в рамках проекта WHATWG (Web Hypertext Application Technology Working Group) и поддерживаются W3C как единый живой стандарт.

Современное состояние

Начиная с 2010-х годов, DOM развивается как «живой стандарт» (Living Standard), что означает постоянное внесение изменений и улучшений без привязки к версиям. Современные браузеры реализуют DOM с высокой степенью совместимости, хотя некоторые различия в реализации отдельных методов и свойств сохраняются.

Структура и представление

Дерево узлов

DOM представляет документ как иерархическое дерево узлов. Каждый узел соответствует части документа: элементу (тегу), текстовому фрагменту, атрибуту, комментарию или самому документу. Корневым узлом является объект Document, от которого ответвляются все остальные узлы. Например, для HTML-документа корневым элементом является <html>, который содержит дочерние узлы <head> и <body>.

Типы узлов

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

  • Node — базовый интерфейс для всех узлов.
  • Document — представляет весь документ (корневой узел).
  • Element — представляет элемент (тег) документа.
  • Attr — представляет атрибут элемента (в современных реализациях атрибуты чаще рассматриваются как свойства элемента, а не отдельные узлы).
  • Text — представляет текстовое содержимое внутри элемента.
  • Comment — представляет комментарий в документе.
  • DocumentFragment — лёгкий контейнер для временного хранения фрагментов документа.

Интерфейсы и свойства

Каждый узел обладает набором свойств и методов, определённых в соответствующих интерфейсах. Ключевые свойства:

  • nodeType — числовой код, указывающий тип узла.
  • nodeName — имя узла (например, для элемента — имя тега).
  • nodeValue — значение узла (для текстовых узлов — текст, для атрибутов — значение).
  • parentNode, childNodes, firstChild, lastChild, nextSibling, previousSibling — для навигации по дереву.
  • innerHTML — свойство, позволяющее получить или установить HTML-содержимое элемента (не является частью стандарта DOM, но широко поддерживается браузерами).

Основные методы и операции

Для доступа к элементам документа используются методы, возвращающие узлы или коллекции узлов:

  • document.getElementById(id) — возвращает элемент с указанным идентификатором.
  • document.getElementsByTagName(tag) — возвращает живую коллекцию элементов с заданным тегом.
  • document.getElementsByClassName(class) — возвращает живую коллекцию элементов с указанным классом.
  • document.querySelector(selector) — возвращает первый элемент, соответствующий CSS-селектору.
  • document.querySelectorAll(selector) — возвращает статическую коллекцию (NodeList) всех элементов, соответствующих селектору.

Манипуляция содержимым

Изменение содержимого документа производится через методы и свойства узлов:

  • element.innerHTML — установка или получение HTML-разметки внутри элемента.
  • element.textContent — установка или получение текстового содержимого (без HTML-тегов).
  • element.setAttribute(name, value) — установка значения атрибута.
  • element.getAttribute(name) — получение значения атрибута.
  • element.removeAttribute(name) — удаление атрибута.
  • document.createElement(tag) — создание нового элемента.
  • document.createTextNode(text) — создание текстового узла.
  • parent.appendChild(child) — добавление дочернего узла в конец родительского.
  • parent.insertBefore(newNode, referenceNode) — вставка узла перед указанным.
  • parent.removeChild(child) — удаление дочернего узла.
  • element.cloneNode(deep) — клонирование узла (с глубоким копированием или без).

Работа со стилями

DOM предоставляет доступ к стилям элементов через свойство style, которое содержит объект CSSStyleDeclaration. Например:

  • element.style.color = "red" — изменение цвета текста.
  • element.style.display = "none" — скрытие элемента.
  • element.classList.add("class"), element.classList.remove("class"), element.classList.toggle("class") — управление CSS-классами.

События

Модель событий

DOM поддерживает событийно-ориентированную модель, позволяющую реагировать на действия пользователя (клики, нажатия клавиш, движения мыши) и изменения состояния документа (загрузка, изменение размеров). События распространяются по дереву документа в три фазы:

  1. Фаза захвата (capturing) — событие спускается от корневого узла к целевому.
  2. Фаза цели (target) — событие достигает целевого элемента.
  3. Фаза всплытия (bubbling) — событие поднимается обратно от целевого элемента к корневому.

Добавление обработчиков

Основные способы назначения обработчиков:

  • element.addEventListener(event, handler, options) — современный метод, позволяющий добавлять несколько обработчиков на одно событие и управлять фазами распространения.
  • element.onclick = function() {...} — устаревший способ, назначающий один обработчик на событие.
  • Атрибуты HTML, например <button onclick="alert('Click')"> — не рекомендуется из-за смешивания логики и разметки.

Производительность и оптимизация

Проблемы производительности

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

  • Частое обращение к DOM.
  • Изменение стилей, влияющих на геометрию элементов.
  • Вставка или удаление большого количества элементов.

Рекомендации по оптимизации

  • Использовать DocumentFragment для групповой вставки элементов.
  • Минимизировать количество обращений к DOM, кэшируя ссылки на узлы.
  • Изменять стили через классы, а не через свойство style для каждого элемента.
  • Использовать requestAnimationFrame для анимаций.
  • Применять виртуальный DOM (например, в библиотеках React, Vue.js) для минимизации прямых манипуляций.

Критика и альтернативы

Критика

  • Сложность и громоздкость — интерфейсы DOM, особенно в ранних версиях, были избыточно сложными для простых задач.
  • Производительность — прямое манипулирование DOM может быть неэффективным для сложных одностраничных приложений.
  • Несовместимость — исторически разные браузеры по-разному реализовывали DOM, что требовало написания кросс-браузерного кода.

Альтернативы

  • jQuery — популярная библиотека, упрощающая работу с DOM, событиями и анимациями, но её использование снижается в пользу нативных API.
  • Виртуальный DOM — концепция, используемая в React, Vue.js и других фреймворках, где изменения сначала вносятся в лёгкую копию DOM, а затем эффективно применяются к реальному DOM.
  • Shadow DOM — часть стандарта Web Components, позволяющая изолировать стили и разметку компонента от основного документа.

Интересные факты

  • DOM не является частью языка JavaScript — это отдельный API, который может быть реализован для любого языка программирования.
  • Первые версии DOM были разработаны для работы с XML, а HTML-документы рассматривались как частный случай XML.
  • В 2015 году W3C и WHATWG договорились о совместной работе над единым живым стандартом DOM, что положило конец многолетнему конфликту.

Источники

  • Document Object Model (DOM) — W3C Recommendation
  • DOM Living Standard — WHATWG
  • JavaScript: The Definitive Guide, David Flanagan
  • MDN Web Docs: Document Object Model (DOM)
  • «Выразительный JavaScript», Марейн Хавербеке

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

На главную BFOmetr →

Похожие материалы