Объектная модель документа ( DOM ) — это кроссплатформенный и независимый от языка интерфейс, который рассматривает документ HTML или XML как древовидную структуру , в которой каждый узел является объектом , представляющим часть документа. DOM представляет документ с логическим деревом. Каждая ветвь дерева заканчивается узлом, и каждый узел содержит объекты. Методы DOM обеспечивают программный доступ к дереву; с их помощью можно изменять структуру, стиль или содержимое документа. [2] К узлам могут быть прикреплены обработчики событий (также известные как прослушиватели событий). После того, как событие срабатывает, обработчики событий выполняются. [3]
Основная стандартизация DOM была выполнена Консорциумом Всемирной паутины (W3C), который в последний раз разработал рекомендацию в 2004 году. WHATWG взял на себя разработку стандарта, опубликовав его как живой документ . Теперь W3C публикует стабильные снимки стандарта WHATWG.
В HTML DOM (Document Object Model) каждый элемент является узлом: [4]
История объектной модели документа тесно переплетена с историей « войн браузеров » конца 1990-х годов между Netscape Navigator и Microsoft Internet Explorer , а также с историей JavaScript и JScript — первых языков сценариев , широко реализованных в движках JavaScript веб -браузеров .
JavaScript был выпущен Netscape Communications в 1995 году в составе Netscape Navigator 2.0. Конкурент Netscape, Microsoft , выпустил Internet Explorer 3.0 в следующем году с повторной реализацией JavaScript под названием JScript. JavaScript и JScript позволили веб-разработчикам создавать веб-страницы с интерактивностью на стороне клиента . Ограниченные возможности обнаружения событий, сгенерированных пользователем , и изменения HTML-документа в первом поколении этих языков в конечном итоге стали известны как «DOM уровня 0» или «Legacy DOM». Для DOM уровня 0 не было разработано независимого стандарта, но он был частично описан в спецификациях HTML 4 .
Устаревший DOM был ограничен в типах элементов , к которым можно было получить доступ. На элементы формы , ссылки и изображения можно было ссылаться с помощью иерархического имени, которое начиналось с корневого объекта документа. Иерархическое имя могло использовать либо имена, либо последовательный индекс пройденных элементов. Например, к элементу ввода формы можно было получить доступ как document.myForm.myInputили document.forms[0].elements[0].
Устаревшая модель DOM обеспечивала проверку форм на стороне клиента и простую интерактивность интерфейса, например создание всплывающих подсказок .
В 1997 году Netscape и Microsoft выпустили версии 4.0 Netscape Navigator и Internet Explorer соответственно, добавив поддержку функциональности Dynamic HTML (DHTML), позволяющей вносить изменения в загруженный HTML-документ. DHTML требовал расширений для элементарного объекта документа, который был доступен в реализациях Legacy DOM. Хотя реализации Legacy DOM были в значительной степени совместимы, поскольку JScript был основан на JavaScript, расширения DHTML DOM разрабатывались параллельно каждым производителем браузеров и оставались несовместимыми. Эти версии DOM стали известны как «Intermediate DOM».
После стандартизации ECMAScript рабочая группа W3C DOM начала разработку стандартной спецификации DOM. Завершенная спецификация, известная как «DOM Level 1», стала Рекомендацией W3C в конце 1998 года. К 2005 году большие части W3C DOM хорошо поддерживались распространенными браузерами с поддержкой ECMAScript, включая Internet Explorer 6 (с 2001 года), Opera , Safari и браузеры на основе Gecko (например , Mozilla , Firefox , SeaMonkey и Camino ).
Рабочая группа W3C DOM опубликовала свою окончательную рекомендацию и впоследствии была расформирована в 2004 году. Усилия по разработке перешли в WHATWG , которая продолжает поддерживать существующий стандарт. [5] В 2009 году группа Web Applications реорганизовала деятельность DOM в W3C. [6] В 2013 году из-за отсутствия прогресса и предстоящего выпуска HTML5 спецификация DOM Level 4 была передана рабочей группе HTML для ускорения ее завершения. [7] Тем временем в 2015 году группа Web Applications была расформирована, а управление DOM перешло к группе Web Platform. [8] Начиная с публикации DOM Level 4 в 2015 году, W3C создает новые рекомендации на основе снимков стандарта WHATWG.
getElementByIdфункцию, а также модель событий и поддержку пространств имен XML и CSS.Для отображения документа, например страницы HTML, большинство веб-браузеров используют внутреннюю модель, похожую на DOM. Узлы каждого документа организованы в древовидную структуру , называемую деревом DOM , с самым верхним узлом, называемым «объектом документа». Когда страница HTML отображается в браузерах, браузер загружает HTML в локальную память и автоматически анализирует его, чтобы отобразить страницу на экране. Однако DOM не обязательно должен быть представлен в виде дерева, [11] и некоторые браузеры использовали другие внутренние модели. [12]
При загрузке веб-страницы браузер создает объектную модель документа страницы, которая является объектно-ориентированным представлением HTML-документа, который действует как интерфейс между JavaScript и самим документом. Это позволяет создавать динамические веб-страницы , [13] поскольку внутри страницы JavaScript может:
Дерево Document Object Model (DOM) — это иерархическое представление документа HTML или XML . Оно состоит из корневого узла, который является самим документом, и ряда дочерних узлов, которые представляют элементы, атрибуты и текстовое содержимое документа. Каждый узел в дереве имеет родительский узел, за исключением корневого узла, и может иметь несколько дочерних узлов.
Элементы в документе HTML или XML представлены как узлы в дереве DOM. Каждый узел элемента имеет имя тега, атрибуты и может содержать другие узлы элементов или текстовые узлы в качестве дочерних. Например, документ HTML со следующей структурой:
< html > < head > < title > Мой сайт </ title > </ head > < body > < h1 > Добро пожаловать </ h1 > < p > Это мой сайт. </ p > </ body > </ html >будет представлен в дереве DOM как:
- Документ (корневой) - html - голова - заголовок - "Мой сайт" - тело - х1 - "Добро пожаловать" - п - «Это мой сайт».Текстовое содержимое внутри элемента представлено как текстовый узел в дереве DOM. Текстовые узлы не имеют атрибутов или дочерних узлов и всегда являются листовыми узлами в дереве. Например, текстовое содержимое "My Website" в элементе title и "Welcome" в элементе h1 в приведенном выше примере представлены как текстовые узлы.
Атрибуты элемента представлены как свойства узла элемента в дереве DOM. Например, элемент со следующим HTML:
<a href="https://example.com"> Ссылка </a> будет представлен в дереве DOM как:
- а - href: "https://example.com" - "Связь"Дерево DOM можно обрабатывать с помощью JavaScript или других языков программирования. К распространенным задачам относятся навигация по дереву, добавление, удаление и изменение узлов, а также получение и настройка свойств узлов. API DOM предоставляет набор методов и свойств для выполнения этих операций, таких как getElementById, createElement, appendChild, и innerHTML.
// Создаем корневой элемент var root = document . createElement ( "root" ); // Создаем дочерний элемент var child = document . createElement ( "child" ); // Добавляем дочерний элемент к корневому элементу root . appendChild ( child );Другой способ создания структуры DOM — использование свойства innerHTML для вставки HTML-кода в виде строки, создавая элементы и дочерние элементы в процессе. Например:
document.getElementById ( " root" ). innerHTML = " <child> </child>" ; Другой метод — использовать библиотеку или фреймворк JavaScript, например jQuery , AngularJS , React , Vue.js и т. д. Эти библиотеки предоставляют более удобный, наглядный и эффективный способ создания, управления и взаимодействия с DOM.
Также возможно создать структуру DOM из данных XML или JSON, используя методы JavaScript для анализа данных и создания соответствующих узлов.
Создание структуры DOM не обязательно означает, что она будет отображаться на веб-странице, она существует только в памяти и должна быть добавлена к телу документа или определенному контейнеру для визуализации.
Подводя итог, можно сказать, что создание структуры DOM подразумевает создание отдельных узлов и организацию их в иерархическую структуру с использованием JavaScript или других языков программирования. Это можно сделать несколькими способами в зависимости от варианта использования и предпочтений разработчика.
Поскольку DOM поддерживает навигацию в любом направлении (например, родительский и предыдущий сестринский) и допускает произвольные изменения, реализации обычно буферизуют документ. [14] Однако DOM вообще не обязательно должен возникать в сериализованном документе, а может быть создан на месте с помощью API DOM. Кроме того, были реализации даже до самого DOM, эквивалентной структуры с постоянным дисковым представлением и быстрым доступом, например, модель DynaText , раскрытая в [15], и различные подходы к базам данных.
Веб-браузеры полагаются на движки макета для разбора HTML в DOM. Некоторые движки макета, такие как Trident/MSHTML , связаны в первую очередь или исключительно с определенным браузером, таким как Internet Explorer. Другие, включая Blink , WebKit и Gecko , используются рядом браузеров, таких как Google Chrome , Opera , Safari и Firefox . Различные движки макета реализуют стандарты DOM с разной степенью соответствия.
Реализации DOM:
API, предоставляющие реализации DOM:
Инструменты для проверки:
Document Object Model — это платформенно- и языково-нейтральный интерфейс, который позволяет программам и скриптам динамически получать доступ и обновлять содержимое, структуру и стиль документов.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )Однако DOM не определяет, что документы должны быть реализованы как дерево или роща, и не определяет, как должны быть реализованы отношения между объектами. DOM — это логическая модель, которая может быть реализована любым удобным способом.
