Объектная модель документа

Объектная модель документа (DOM)
	Пример иерархии DOM в HTML-документе
Аббревиатура	ДОМ
Впервые опубликовано	1 октября 1998 г .; 25 лет назад
Последняя версия	ДОМ4 ; 19 ноября 2015 г .; 8 лет назад
Организация	Консорциум Всемирной паутины , WHATWG
Базовые стандарты	WHATWG DOM Уровень жизни ; W3C DOM4

Объектная модель документа ( 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 elementvar root = document.createElement("root");// Create a child elementvar child = document.createElement("child");// Add the child element to the root elementroot.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)

[1] Все версии относятся только к W3C DOM.

[2] «Объектная модель документа (DOM): определение, структура и пример» . Цифровой гид IONOS . Проверено 21 апреля 2022 г.

[Introduction-3] «Объектная модель документа (DOM)» . W3C . Проверено 12 января 2012 г. Объектная модель документа — это независимый от платформы и языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документов.

[4] «JavaScript HTML DOM» .

[5] «ДОМ Стандарт» . Проверено 23 сентября 2016 г.

[6] «Объектная модель документа W3C» . Проверено 23 сентября 2016 г.

[7] ( [адрес электронной почты защищен] ), Филипп Ле Хегаре. «Новый устав рабочей группы по HTML от Филиппа Ле Хегаре от 30 сентября 2013 г. ( [электронная почта защищена] от сентября 2013 г.)» . Проверено 23 сентября 2016 г. {{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )

[8] «PubStatus — ВЕБ-ПРИЛОЖЕНИЯ» . Проверено 23 сентября 2016 г.

[9] «W3C DOM4» . Проверено 8 января 2021 г.

[Level3-Introduction-10] «Что такое объектная модель документа?» . W3C . Проверено 12 сентября 2021 г. Однако в DOM не указано, что документы должны быть реализованы в виде дерева или рощи, а также не указано, как реализовываться отношения между объектами. DOM — это логическая модель, которую можно реализовать любым удобным способом.

[Modernizing-Dom-11] «Модернизация дерева DOM в Microsoft Edge» . Майкрософт. 19 апреля 2017 года . Проверено 12 сентября 2021 г.

[12] «JavaScript HTML DOM» . Проверено 23 сентября 2016 г.

[13] Когент Солюшнс Инк. (2008). Черная книга Ajax, новое издание (с компакт-диском) . Дримтек Пресс. п. 40. ИСБН 978-8177228380 .

[14] «XML для кроссплатформенного анализатора XML <SCRIPT> в JavaScript» . Проверено 23 сентября 2016 г.

[15] «Современный DOM API для проектов PHP 7» . 5 декабря 2021 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

v т и JavaScript
Code analysis	ESLint JSHint JSLint
Supersets	JS++ TypeScript ArkTS
Transpilers	AtScript Babel ClojureScript CoffeeScript Dart Elm Emscripten Google Closure Compiler Google Web Toolkit Haxe LiveScript Morfik Nim Opa PureScript Reason WebSharper
Concepts	JavaScript library JavaScript syntax
Debuggers	Chrome DevTools Firefox Inspector Komodo IDE Microsoft Edge DevTools Opera DevTools Safari Web Inspector
Doc generators	JSDoc
Editors (comparison)	Ace Cloud9 IDE Atom CodeMirror Brackets Light Table PhpStorm Orion Visual Studio Visual Studio Express Visual Studio Code Visual Studio Team Services Vim
Engines	List of ECMAScript engines
Frameworks	Comparison of JavaScript frameworks List of JavaScript libraries
Related technologies	Ajax AssemblyScript asm.js Cascading Style Sheets Document Object Model HTML HTML5 JSON WebAssembly WebAuthn
Package managers	npm yarn
Module bundlers	Webpack Vite esbuild
Server-side	Active Server Pages Bun CommonJS Deno JSGI Node.js Wakanda
Unit testing frameworks (list)	Jasmine Jest Mocha QUnit
People	Douglas Crockford Ryan Dahl Brendan Eich John Resig