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

DOM-модель

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

История и развитие

Предпосылки появления

До создания единой DOM-модели веб-браузеры использовали собственные, несовместимые друг с другом способы доступа к элементам страницы. В середине 1990-х годов, с ростом популярности JavaScript, возникла необходимость в стандартизации взаимодействия скриптов с содержимым веб-страниц. В 1997 году компания Netscape Communications представила технологию Dynamic HTML (DHTML), которая позволяла изменять страницу после загрузки, но её реализация была привязана к браузеру Netscape Navigator. Аналогичные решения разрабатывались и в Microsoft Internet Explorer.

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

Консорциум W3C начал работу над унифицированной объектной моделью документа в 1998 году. Первая версия спецификации, DOM Level 1, была опубликована в октябре 1998 года. Она определила базовую структуру документа как дерево узлов и методы для навигации по нему и изменения содержимого.

В последующие годы были выпущены следующие версии:

  • DOM Level 2 (ноябрь 2000 года): добавил поддержку событийной модели (Event Model), пространств имён XML, стилей CSS и методов для работы с диапазонами (Range) и фильтрацией узлов.
  • DOM Level 3 (апрель 2004 года): ввёл методы для загрузки и сохранения документов (Load and Save), поддержку XPath, а также уточнил правила работы с текстовым содержимым узлов.
  • DOM Level 4 (2015 год): стал частью спецификации WHATWG DOM Living Standard, которая развивается как «живой» стандарт, постоянно обновляемый производителями браузеров. В этой версии были устранены многие устаревшие элементы, упрощён API и улучшена производительность.

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

Начиная с 2010-х годов, разработка DOM-модели перешла под управление WHATWG (Web Hypertext Application Technology Working Group). Современный стандарт, известный как DOM Living Standard, включает все функции предыдущих уровней и постоянно дополняется новыми возможностями, такими как Shadow DOM, Custom Elements и Fetch API. Все основные браузеры (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge) стремятся к полной поддержке этого стандарта.

Основные понятия и структура

Дерево узлов (Node Tree)

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

Пример HTML-кода: ``html <html> <head> <title>Заголовок</title> </head> <body> <p>Привет, мир!</p> </body> </html> `` В DOM-представлении этот код будет выглядеть как дерево:

  • Document
  • html
  • head
  • title
  • Текст: "Заголовок"
  • body
  • p
  • Текст: "Привет, мир!"

Типы узлов

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

  • Document (документ): корневой узел, представляющий весь документ. Методы доступа к нему: document.documentElement (корневой элемент <html>), document.head, document.body.
  • Element (элемент): узел, соответствующий HTML-тегу (например, <div>, <p>, <a>). Имеет свойства tagName, id, className, innerHTML и методы для работы с атрибутами (getAttribute, setAttribute, removeAttribute).
  • Text (текст): узел, содержащий текстовое содержимое элемента. Текстовые узлы не могут иметь дочерних узлов.
  • Attribute (атрибут): узел, представляющий атрибут элемента (например, class="container"). В современных реализациях DOM атрибуты часто рассматриваются как свойства элемента, а не как отдельные узлы в дереве.
  • Comment (комментарий): узел, содержащий HTML-комментарий (<!-- ... -->).

Отношения между узлами

Узлы в дереве связаны между собой отношениями, аналогичными семейным:

  • Родитель (parent): узел, который содержит данный узел.
  • Дочерний (child): узел, находящийся внутри другого узла.
  • Соседний (sibling): узлы, имеющие одного родителя.
  • Потомок (descendant): любой узел, находящийся внутри данного узла (включая дочерние, внуков и т.д.).
  • Предок (ancestor): любой узел, содержащий данный узел (включая родителя, деда и т.д.).

Ключевые возможности и методы

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

Для перемещения по дереву узлов используются свойства, доступные у любого узла:

  • parentNode — родительский узел.
  • childNodes — коллекция всех дочерних узлов (включая текстовые и комментарии).
  • firstChild / lastChild — первый и последний дочерний узел.
  • nextSibling / previousSibling — следующий и предыдущий соседний узел.
  • children — коллекция только дочерних элементов (без текстовых узлов).
  • firstElementChild / lastElementChild — первый и последний дочерний элемент.
  • nextElementSibling / previousElementSibling — следующий и предыдущий элемент-сосед.

Поиск элементов

Для поиска элементов в документе используются методы объекта document и отдельных элементов:

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

Изменение документа

DOM-модель позволяет динамически изменять содержимое и структуру страницы:

  • Изменение содержимого: свойства innerHTML (замена HTML-кода внутри элемента), textContent (замена или получение текстового содержимого), outerHTML (замена самого элемента вместе с его содержимым).
  • Создание и вставка узлов: методы createElement(tagName), createTextNode(text), appendChild(node), insertBefore(newNode, referenceNode), removeChild(node).
  • Изменение атрибутов: методы setAttribute(name, value), getAttribute(name), removeAttribute(name), а также прямое обращение к свойствам (например, element.id = "newId").
  • Изменение стилей: через свойство style (например, element.style.color = "red") или через управление классами с помощью classList (add, remove, toggle, contains).

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

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

  • addEventListener(event, handler, options) — назначает обработчик на событие.
  • removeEventListener(event, handler) — удаляет обработчик.
  • События распространяются по дереву в трёх фазах: фаза погружения (capture), фаза цели (target) и фаза всплытия (bubbling). Это позволяет реализовывать делегирование событий.

Применение

Веб-разработка

DOM-модель является основой для создания интерактивных веб-страниц. На ней базируются все современные JavaScript-фреймворки и библиотеки (React, Vue.js, Angular, Svelte), которые, однако, часто используют виртуальный DOM (Virtual DOM) для оптимизации производительности. Виртуальный DOM — это абстрактное представление реального DOM, с которым работают фреймворки, внося изменения в реальный DOM только после вычисления разницы (diffing).

Серверный рендеринг (SSR)

В среде Node.js существуют библиотеки (например, jsdom, cheerio), которые эмулируют DOM-модель на стороне сервера. Это позволяет генерировать HTML-код страниц до отправки клиенту, что улучшает SEO и начальную загрузку.

Тестирование

Инструменты для автоматизированного тестирования веб-приложений (Selenium, Puppeteer, Playwright) взаимодействуют с DOM-моделью браузера, чтобы симулировать действия пользователя и проверять состояние страницы.

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

Производительность

Прямое манипулирование DOM-моделью может быть медленным, особенно при массовых изменениях. Каждое изменение (добавление, удаление, изменение стиля) может вызывать пересчёт макета (reflow) и перерисовку (repaint) страницы, что нагружает браузер. Для решения этой проблемы разработчики используют фрагменты документа (DocumentFragment), пакетное обновление стилей и виртуальный DOM.

Сложность

Для сложных одностраничных приложений (SPA) прямое использование DOM API становится громоздким и трудно поддерживаемым. Это привело к появлению фреймворков, которые абстрагируют работу с DOM.

Безопасность

Использование свойства innerHTML для вставки пользовательского контента может привести к уязвимостям типа межсайтового скриптинга (XSS), если вставляемый код не экранирован. Рекомендуется использовать textContent или методы создания узлов (createElement, createTextNode) для безопасной вставки данных.

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

  • DOM-модель не является частью языка JavaScript. Это отдельный API, реализованный браузером, к которому JavaScript получает доступ через глобальный объект window.
  • Первая версия DOM Level 1 состояла из двух частей: Core (для XML) и HTML (расширение для HTML).
  • В спецификации DOM Living Standard насчитывается более 400 различных интерфейсов и методов.

Источники

  1. WHATWG. DOM Living Standard.
  2. W3C. Document Object Model (DOM) Technical Reports.
  3. Flanagan, D. (2016). JavaScript: The Definitive Guide. O'Reilly Media.
  4. Zakas, N. C. (2012). Professional JavaScript for Web Developers. Wrox.

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

На главную BFOmetr →

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