Объектная модель документа
 | Эта статья включает список общих ссылок , но в ней отсутствуют достаточные соответствующие встроенные цитаты . ( Август 2010 г. ) |
 Пример иерархии DOM в HTML-документе | |
| Аббревиатура | ДОМ |
|---|---|
| Впервые опубликовано | 1 октября 1998 г |
| Последняя версия | ДОМ4 [1] 19 ноября 2015 г |
| Организация | Консорциум Всемирной паутины , WHATWG |
| Базовые стандарты | WHATWG DOM Уровень жизни W3C DOM4 |
| HTML |
|---|
| Сравнения |
Объектная модель документа ( DOM ) — это кросс-платформенный и независимый от языка интерфейс, который рассматривает документ HTML или XML как древовидную структуру , в которой каждый узел является объектом , представляющим часть документа. DOM представляет собой документ с логическим деревом. Каждая ветвь дерева заканчивается узлом, и каждый узел содержит объекты. Методы DOM обеспечивают программный доступ к дереву; с их помощью можно изменить структуру, стиль или содержание документа. [2] К узлам могут быть прикреплены обработчики событий (также известные как прослушиватели событий). Как только событие инициируется, обработчики событий выполняются. [3]
Основной стандартизацией DOM занимался Консорциум World Wide Web (W3C), который последний раз разрабатывал рекомендации в 2004 году. WHATWG взяла на себя разработку стандарта, опубликовав его как живой документ . W3C теперь публикует стабильные снимки стандарта WHATWG.
В HTML DOM (объектная модель документа) каждый элемент является узлом: [4]
- Документ — это узел документа.
- Все элементы HTML являются узлами элементов.
- Все атрибуты HTML являются узлами атрибутов.
- Текст, вставленный в элементы HTML, представляет собой текстовые узлы.
- Комментарии — это узлы комментариев.
История
[ редактировать ]История объектной модели документа переплетается с историей « войн браузеров » конца 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 Level 0» или «Legacy DOM». Для DOM Level 0 не было разработано независимого стандарта, но он был частично описан в спецификациях HTML 4 .
Устаревший DOM был ограничен в типах элементов , к которым можно было получить доступ. На элементы формы , ссылки и изображения можно ссылаться с помощью иерархического имени, которое начинается с корневого объекта документа. Иерархическое имя может использовать либо имена, либо последовательный индекс пройденных элементов. Например, к элементу ввода формы можно получить доступ как document.myForm.myInput или document.forms[0].elements[0].
Legacy DOM обеспечивает проверку формы на стороне клиента и простую интерактивность интерфейса, например создание всплывающих подсказок .
В 1997 году Netscape и Microsoft выпустили версию 4.0 Netscape Navigator и Internet Explorer соответственно, добавив поддержку функций динамического HTML (DHTML), позволяющих вносить изменения в загруженный HTML-документ. DHTML требовал расширения элементарного объекта документа, который был доступен в устаревших реализациях DOM. Хотя реализации Legacy DOM были в значительной степени совместимы, поскольку JScript был основан на JavaScript, расширения DOM DHTML разрабатывались параллельно каждым производителем браузера и оставались несовместимыми. Эти версии DOM стали известны как «Промежуточный DOM».
После стандартизации ECMAScript DOM рабочая группа W3C приступила к разработке стандартной спецификации 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 году группа веб-приложений реорганизовала деятельность DOM в W3C. [6] В 2013 году из-за отсутствия прогресса и предстоящего выпуска HTML5 спецификация DOM Level 4 была передана рабочей группе HTML , чтобы ускорить ее завершение. [7] Тем временем в 2015 году группа веб-приложений была распущена, а управление DOM перешло к группе веб-платформы. [8] Начиная с публикации DOM Level 4 в 2015 году, W3C создает новые рекомендации на основе снимков стандарта WHATWG.
- DOM уровня 1 предоставлял полную модель всего документа HTML или XML , включая средства изменения любой части документа.
- DOM Level 2 был опубликован в конце 2000 года. Он представил
getElementByIdа также модель событий и поддержку пространств имен XML и CSS. - В DOM Level 3, опубликованном в апреле 2004 года, добавлена поддержка XPath и обработки событий клавиатуры , а также интерфейс для сериализации документов в формате XML.
- HTML5 был опубликован в октябре 2014 года. Часть HTML5 заменила HTML-модуль DOM Level 2.
- DOM Level 4 был опубликован в 2015 году. Это снимок уровня жизни WHATWG. [9]
Приложения
[ редактировать ]Веб-браузеры
[ редактировать ]Для рендеринга документа, такого как HTML-страница, большинство веб-браузеров используют внутреннюю модель, аналогичную DOM. Узлы каждого документа организованы в древовидную структуру , называемую деревом DOM , причем самый верхний узел называется «Объект документа». Когда HTML-страница отображается в браузерах, браузер загружает HTML-код в локальную память и автоматически анализирует его для отображения страницы на экране. Однако DOM не обязательно должен быть представлен в виде дерева. [10] и некоторые браузеры использовали другие внутренние модели. [11]
JavaScript
[ редактировать ]Когда веб-страница загружается, браузер создает объектную модель документа страницы, которая представляет собой объектно-ориентированное представление HTML-документа, действующее как интерфейс между JavaScript и самим документом. Это позволяет создавать динамические веб-страницы , [12] потому что внутри страницы JavaScript может:
- добавлять, изменять и удалять любые элементы и атрибуты HTML
- измените любой из стилей CSS
- реагировать на все происходящие события
- создавать новые события
Древовидная структура DOM
[ редактировать ]Дерево объектной модели документа (DOM) — это иерархическое представление документа HTML или XML . Он состоит из корневого узла, которым является сам документ, и ряда дочерних узлов, которые представляют элементы, атрибуты и текстовое содержимое документа. Каждый узел в дереве имеет родительский узел, за исключением корневого узла, и может иметь несколько дочерних узлов.
Элементы как узлы
[ редактировать ]Элементы в документе HTML или XML представлены как узлы в дереве DOM. Каждый узел элемента имеет имя тега, атрибуты и может содержать другие узлы элементов или текстовые узлы в качестве дочерних элементов. Например, HTML-документ следующей структуры:
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my website.</p>
</body>
</html>
будет представлено в дереве DOM как:
- Document (root)
- html
- head
- title
- "My Website"
- body
- h1
- "Welcome"
- p
- "This is my website."
Текстовые узлы
[ редактировать ]Текстовое содержимое внутри элемента представлено как текстовый узел в дереве DOM. Текстовые узлы не имеют атрибутов или дочерних узлов и всегда являются конечными узлами дерева. Например, текстовое содержимое «Мой веб-сайт» в элементе заголовка и «Добро пожаловать» в элементе h1 в приведенном выше примере представлены как текстовые узлы.
Атрибуты как свойства
[ редактировать ]Атрибуты элемента представлены как свойства узла элемента в дереве DOM. Например, элемент со следующим HTML:
<a href="https://example.com">Link</a>
будет представлено в дереве DOM как:
- a
- href: "https://example.com"
- "Link"
Управление деревом DOM
[ редактировать ]
Деревом DOM можно управлять с помощью JavaScript или других языков программирования. Общие задачи включают навигацию по дереву, добавление, удаление и изменение узлов, а также получение и настройку свойств узлов. DOM API предоставляет набор методов и свойств для выполнения этих операций, таких как getElementById, createElement, appendChild, и innerHTML.
// Create the root element
var root = document.createElement("root");
// Create a child element
var child = document.createElement("child");
// Add the child element to the root element
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 поддерживает навигацию в любом направлении (например, между родительским и предыдущим одноуровневым элементом) и допускает произвольные модификации, реализация должна, по крайней мере, буферизовать документ, который был прочитан до сих пор (или некоторую его проанализированную форму). [13]
Механизмы компоновки
[ редактировать ]Веб-браузеры полагаются на механизмы компоновки для анализа HTML в DOM. Некоторые механизмы компоновки, такие как Trident/MSHTML , связаны преимущественно или исключительно с определенным браузером, например Internet Explorer. Другие, включая Blink , WebKit и Gecko , используются рядом браузеров, таких как Google Chrome , Opera , Safari и Firefox . Различные механизмы компоновки реализуют стандарты DOM с разной степенью соответствия.
Библиотеки
[ редактировать ]Реализации DOM:
- libxml2
- MSXML
- Xerces — это набор реализаций DOM, написанных на C++, Java и Perl.
- xml.dom для Python
- XML для <SCRIPT> — это реализация DOM на основе JavaScript. [14]
- PHP.Gt DOM — это реализация DOM на стороне сервера, основанная на libxml2 и обеспечивающая совместимость с DOM уровня 4. [15] на PHP язык программирования
- Domino — это реализация DOM на стороне сервера (Node.js), основанная на dom.js от Mozilla. Domino используется в стеке MediaWiki вместе с визуальным редактором.
- SimpleHtmlDom — это простая объектная модель HTML-документа на C#, которая может программно генерировать строку HTML.
API, которые предоставляют реализации DOM:
- JAXP (Java API для обработки XML) — это API для доступа к поставщикам DOM.
- Lazarus ( Free Pascal IDE) содержит два варианта DOM — с форматами UTF-8 и ANSI.
Инструменты проверки:
- DOM Inspector — инструмент веб-разработчика.
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Все версии относятся только к W3C DOM.
- ^ «Объектная модель документа (DOM): определение, структура и пример» . Цифровой гид IONOS . Проверено 21 апреля 2022 г.
- ^ «Объектная модель документа (DOM)» . W3C . Проверено 12 января 2012 г.
Объектная модель документа — это независимый от платформы и языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документов.
- ^ «JavaScript HTML DOM» .
- ^ «ДОМ Стандарт» . Проверено 23 сентября 2016 г.
- ^ «Объектная модель документа W3C» . Проверено 23 сентября 2016 г.
- ^ ( [адрес электронной почты защищен] ), Филипп Ле Хегаре. «Новый устав рабочей группы по HTML от Филиппа Ле Хегаре от 30 сентября 2013 г. ( [электронная почта защищена] от сентября 2013 г.)» . Проверено 23 сентября 2016 г.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка ) - ^ «PubStatus — ВЕБ-ПРИЛОЖЕНИЯ» . Проверено 23 сентября 2016 г.
- ^ «W3C DOM4» . Проверено 8 января 2021 г.
- ^ «Что такое объектная модель документа?» . W3C . Проверено 12 сентября 2021 г.
Однако в DOM не указано, что документы должны быть реализованы в виде дерева или рощи, а также не указано, как реализовываться отношения между объектами. DOM — это логическая модель, которую можно реализовать любым удобным способом.
- ^ «Модернизация дерева DOM в Microsoft Edge» . Майкрософт. 19 апреля 2017 года . Проверено 12 сентября 2021 г.
- ^ «JavaScript HTML DOM» . Проверено 23 сентября 2016 г.
- ^ Когент Солюшнс Инк. (2008). Черная книга Ajax, новое издание (с компакт-диском) . Дримтек Пресс. п. 40. ИСБН 978-8177228380 .
- ^ «XML для кроссплатформенного анализатора XML <SCRIPT> в JavaScript» . Проверено 23 сентября 2016 г.
- ^ «Современный DOM API для проектов PHP 7» . 5 декабря 2021 г.
Общие ссылки
[ редактировать ]- Фланаган, Дэвид (2006). JavaScript: полное руководство . О'Рейли и партнеры. стр. 312–313 . ISBN 0-596-10199-6 .
- Кох, Питер-Пол (14 мая 2001 г.). «Объектная модель документа: введение» . Цифровой веб-журнал . Архивировано из оригинала 27 апреля 2017 года . Проверено 10 января 2009 г.
- Ле Эгаре, Филипп (2002). «Объектная модель документа W3C (DOM)» . Консорциум Всемирной паутины . Проверено 10 января 2009 г.
- Гиссе, Фабиан. «Что дает каждый уровень DOM?» . Центр разработчиков Mozilla . Проект Мозилла. Архивировано из оригинала 2 марта 2013 года . Проверено 10 января 2009 г.
Внешние ссылки
[ редактировать ]
- Уровень жизни DOM по версии WHATWG
- Исходный хаб W3C DOM , созданный рабочей группой W3C DOM (устаревший)
- Последние снимки уровня жизни WHATWG , опубликованные рабочей группой W3C HTML.
- Рабочая группа веб-платформы (нынешний управляющий W3C DOM)
| Базы данных органов управления : Национальные |
|---|
