Изобретение JavaScript в 1990-х годах ознаменовало собой важный поворотный момент для Всемирной паутины. Ранее статичные веб-сайты теперь превратились во все более динамичные веб-проекты — благодаря соответствующим элементам знаменитого языка сценариев. Производители браузеров отреагировали на это внедрением соответствующего интерпретатора и разработкой собственной модели для динамического HTML (DHTML). Только благодаря этим интерпретаторам и моделям стали возможны всесторонние структурные и оптические изменения веб-документа во время чтения в браузере, что позволило использовать весь потенциал JavaScript.
Поскольку различные техники никак не были ориентированы друг на друга, веб-разработчики комбинировали их, чтобы предложить свои динамические проекты всем браузерам. Однако это требовало значительных усилий. По этой причине в 1998 году консорциум W3C выпустил первую спецификацию Document Object Models (DOM), которая и по сей день играет центральную роль в программировании на JavaScript.
Что такое объектная модель документа (DOM)?
Объектная модель документа, сокращенно DOM, — это стандартизированный программный интерфейс для структурирования документов HTML и XML. Она была разработана и выпущена World Wide Consortium (W3C), организацией, основанной изобретателем Интернета Тимом Бернерсом-Ли в 1994 году, для разработки и установления стандартов для Всемирной паутины.
Цель объектной модели документа — максимально упростить доступ программистов к компонентам веб-проекта, чтобы они могли добавлять, удалять и редактировать содержимое, атрибуты и стили проекта. DOM служит платформо-независимым и языково-нейтральным связующим звеном между скриптовыми языками, такими как JavaScript, и базовым веб-документом, поскольку он изображает структуру документа в виде древовидной структуры, в которой каждый узел является независимым, выбираемым объектом. Из-за этой структуры данный тип отображаемой версии веб-проекта также называют DOM-деревом.
В отличие от названия, DOM на самом деле не является моделью. Это скорее — как уже упоминалось — интерфейс программирования. Однако объектную модель документа можно рассматривать в переносном смысле как модель доступа к веб-данным, которые отображаются в виде объекта.
Где и когда используются DOM-деревья?
Объектная модель документа была разработана для использования во Всемирной паутине, где она в основном и применяется. Точнее, именно в конкретных браузерах используются стандартизированные интерфейсы.
Таким образом, популярные веб-клиенты используют DOM или интерфейсы, основанные на DOM, для рендеринга доступных HTML или XML страниц. В ходе этого процесса отдельные компоненты объединяются в узлы и организуются в индивидуальное дерево DOM. В то же время соответствующий браузер загружает эту отрисованную версию веб-документа в локальное хранилище, чтобы проанализировать или обработать ее и, наконец, представить страницу в форме, предусмотренной разработчиком. Для рендеринга браузеры используют различные движки (программное обеспечение для рендеринга), такие как Gecko (Firefox), WebKit (Safari) или Blink (Chrome, Edge, Opera), которые также основаны на стандарте DOM.
В целях защиты вашей конфиденциальности видео не будет загружаться, пока вы не нажмете на него.
Как объектно-ориентированное представление веб-документа, объектная модель документа остается актуальной и после вывода — как интерфейс для всего запрограммированного динамического контента и, соответственно, для всех взаимодействий пользователя, которые могут изменить внешний вид сайта во время вывода.
В 2012 году консорциум W3C ввел специальный интерфейс с названием Shadow DOM в качестве одного из четырех столпов так называемых веб-компонентов. Это позволяет расширить реальную объектную модель веб-документа с помощью независимых поддеревьев (теневых деревьев). Вы можете узнать больше по теме Shadow DOM.
Как структурирована объектная модель документа?
HTML-разметка определяет отношения между различными тегами. Таким образом, элементы веб-документа, обозначенные тегами, являются вышестоящими или нижестоящими, например, в зависимости от их роли в веб-проекте. Кроме того, одни теги могут содержаться внутри других. Для того чтобы просто адекватно отобразить эти иерархии в объектной модели документа, интерфейс использует упомянутую выше древовидную структуру, которая позволяет соответствующим образом расположить отображаемые объекты.
Таким образом, структура дерева DOM всегда зависит от базового HTML или XML документа. Для первого, однако, можно придерживаться следующей межпроектной базовой иерархии:
Как и в базовой структуре HTML, сам объект HTML находится на верхней позиции иерархии. Под ним находятся заголовок и тело сайта. В отношении последнего следует считать, что оно содержит как минимум один параграф (раздел с текстовым содержимым).
Отдельные фрагменты в дереве DOM называются узлами. Кроме того, следует различать узлы элементов, таких как объекты HTML, body, header и paragraph, которые можно видеть выше, узлы атрибутов, таких как «align» или «size», и узлы текста.
Объектная модель документа: практический пример (включает HTML-код)
Теперь, когда мы тщательно рассмотрели функции и общую структуру объектных моделей документов в предыдущих разделах, в заключение следует проиллюстрировать базовую технику структурирования для языков веб-сценариев на конкретном примере. В качестве основы служит следующий простой HTML-документ с заголовком (включая ссылку на таблицу стилей CSS) и телом, а также двумя элементами содержимого (изображение и текст):
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<p><strong>Hello World!</strong></p>
<div><img src="bild.jpg"></div>
</body>
</html>DOM-дерево, сгенерированное из этогоHTML-кода, выглядит следующим образом:
В качестве альтернативы часто можно встретить следующую форму представления используемого здесь примера объектной модели документа:
DOCTYPE: HTML
HTML
----head
- ---- meta
- ---- link
- ---- title
----body
- ---- p
- ---- strong
- ---- TEXT: Hello World!
- ---- div
- ---- img