DOM, или объектная модель документа — это спецификация программного интерфейса, который представляет HTML- или XML-документ в виде древовидной структуры, в котором каждый узел представляет собой объект, представляющий часть документа, например, заголовок, абзац, список, или ячейка таблицы. Интерфейс не зависит от платформы и языка программирования и, таким образом, позволяет стандартизировать изменения в структуре и макете документа. В веб-браузере это является важным строительным блоком для динамических веб-сайтов.
О термине
Стандарты DOM определяются W3C (Консорциумом Всемирной паутины). Реализация, соответствующая спецификации DOM, состоит из набора классов вместе с их методами и атрибутами в рамках объектно-ориентированного программирования.
Термин «объектная модель документа» на самом деле является неправильным, поскольку DOM определяется не как модель, а как интерфейс для доступа к данным, и W3C также называет его таковым. Обозначение модели, с другой стороны, подчеркивает четко определенную объектную модель, на которой основан интерфейс, достоверность которой является предпосылкой валидности построенного на ней интерфейса. На более высоком уровне абстракции интерфейс также является моделью, названной в честь способа доступа к объектам или данным.
История разработки API объектной модели документа (DOM API)
Изначально DOM был создан под влиянием как минимум двух разработок, которые существенно сформировали компьютерный мир в недавнем прошлом. Оба основаны на необходимости иметь возможность легко и единообразно получать доступ к структурированным данным в документах HTML и XML.
В середине 1990-х годов, когда популярность Всемирной паутины выросла, был изобретен язык сценариев JavaScript, и с тех пор популярные веб-браузеры включают в себя интерпретаторы, выполняющие такие сценарии. В JS определены элементарные возможности доступа к HTML-документу и обработки событий. Позже разные производители браузеров изобрели разные модели динамического HTML (DHTML), которые позволили более масштабно изменять структуру и внешний вид документа при просмотре документа в браузере. Однако эти различия сделали их подходящими для веб-разработчиков, которые хотели использовать динамический HTML, чрезвычайно утомительным делом, поскольку им часто практически приходилось писать отдельную версию для каждого поддерживаемого браузера. Таким образом, первые стандарты DOM W3C представляют собой попытки использовать различные проприетарные методы JS и DHTML, которые использовались во времена войны браузеров. Они были объединены, объединены, стандартизированы и в конечном итоге заменены. Это удалось, и сегодня DOM имеет центральное значение в программировании на JS.
В то же время XML стал общим форматом обмена для удобочитаемого представления структурированных данных, что было связано с успехом HTML. Для обработки XML-документов требовался понятный, мощный и кросс-программный языковой интерфейс. DOM предлагает это, а также определяет дополнительные интерфейсы для удобной обработки XML-документов.
Типы отношений узлов DOM
Следующий HTML-код определяет таблицу с элементом table и дочерними элементами:
<table>
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иннокентий</td>
<td>Каллистратов</td>
</tr>
</tbody>
</table>
Данная структура характеризуется в объектной модели следующими отношениями:
- Корневой узел (root) «table» является дочерним. Дочерними элементами «таблицы» являются «thead» и «tbody».
- Узел элемента «table» поменял местами родительский элемент (parent) «thead” и « tbody«.
- Упоминаются узлы с общим родительским элементом (например, два узла элемента «th») (являются братьями-сестрами).
- Начиная с любого узла, посредством этих отношений можно достичь любого другого узла.
Типы узлов в дереве DOM
Наиболее важные типы узлов в DOM:
- Узел документа представляет всю древовидную структуру.
- Узел фрагмента документа представляет собой часть древовидной структуры.
- Узел элемента точно соответствует элементу в HTML или XML.
- Узел атрибута точно соответствует атрибуту в HTML или XML.
- Текстовый узел представляет текстовое содержимое элемента.
- Узлы атрибутов представляют собой особый тип узлов, поскольку они не отображаются как узлы в древовидной структуре, которая в основном формируется узлами элементов. Таким образом, узлы атрибутов являются не «дочерними» узлами элементов, а их свойствами.
Как обрабатывается документ DOM
На первом этапе существующий документ считывается программой и создается объект документа. Этот объект можно использовать для доступа к содержимому, структуре и отображению с помощью методов DOM API.
Обработка объектной модели документа может включать следующие шаги:
- Навигация между отдельными узлами документа,
- Создание, перемещение и удаление узлов, а также
- Чтение, изменение и удаление текстового контента.
- В конце обработки новый документ XML или HTML может быть сгенерирован из объекта документа путем так называемой сериализации.
Что такое Pre-DOM
Pre DOM — это DOM, который появляется в исходном коде веб-страницы до полной загрузки и рендеринга JS. Pre-DOM содержит исходный код веб-страницы, поскольку шрифты, ресурсы CSS и JS на веб-странице не загружаются, он содержит только HTML-документ. Pre-DOM используется браузером для создания «Post DOM».
Что такое виртуальный DOM
Virtual DOM — это технология, которая позволяет загружать только другую часть путем расчета разницы кода между двумя веб-страницами при открытии новой веб-страницы. В основном он используется одностраничными приложениями. Многие технологии SPA, такие как ReactJS, VueJS или AngularJS, используют Virtual DOM.
Это значительно повышает коэффициент конверсии, особенно на веб-сайтах электронной коммерции, поскольку увеличивает скорость открытия новой страницы. Каждый раз, когда пользователь открывает новую страницу, он запрашивает у сервера только узлы HTML, стили или функции, которые различаются на двух страницах. Таким образом, с каждой новой страницей, которая становится быстрее, пользователь завершает путь щелчка, открывая страницу более быстро и плавно.
Какой размер DOM-дерева лучше всего
Размер DOM означает количество узлов в объектной модели документа. Количество узлов может повлиять на сложность исходного HTML и время рендеринга HTML-документа для браузера. Меньший размер DOM означает, что веб-страница будет загружаться, отображаться и анализироваться быстрее.
Согласно рекомендациям поисковой системы Google по производительности загрузки веб-страницы, веб-страница должна иметь менее 900 узлов HTML, чтобы ее контент быстрее доставлялся пользователям.
