API HTML DOM

Базовая линия Широко доступная *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузера. Она доступна во всех браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

API HTML DOM состоит из интерфейсов, которые определяют функциональность каждого из элементов в HTML, а также любых поддерживающих типов и интерфейсов, от которых они зависят.

Функциональные области, включенные в API HTML DOM, включают:

Доступ к элементам HTML и их управление через DOM.
Доступ к данным форм и их обработка.
Взаимодействие с содержимым 2D-изображений и контекстом HTML <canvas>, например, для рисования поверх них.
Управление медиафайлами, связанными с элементами медиа в HTML (<audio> и <video>).
Перетаскивание содержимого на веб-страницах.
Доступ к истории навигации браузера.
Поддержка и связывающие интерфейсы для других API, таких как Web Components, Web Storage, Web Workers, WebSocket и Server-sent events.

Концепции и использование HTML DOM

В этой статье мы сосредоточимся на частях HTML DOM, связанных с взаимодействием с элементами HTML. Обсуждение других областей, таких как Перетаскивание, WebSocket, Web Storage и т.д., можно найти в документации для этих API.

Структура HTML-документа

Модель объекта документа (DOM) — это архитектура, описывающая структуру document; каждый документ представлен экземпляром интерфейса Document. Документ, в свою очередь, состоит из иерархического дерева узлов, где узел — это базовая запись, представляющая отдельный объект в документе (например, элемент или текстовый узел).

Узлы могут быть чисто организационными, обеспечивая способ группирования других узлов или предоставления точки, в которой может быть построена иерархия; другие узлы могут представлять видимые компоненты документа. Каждый узел основан на интерфейсе Node, который предоставляет свойства для получения информации об узле, а также методы для создания, удаления и организации узлов в DOM.

Узлы не имеют представления о включении содержимого, фактически отображаемого в документе. Они являются пустым контейнером. Основополагающее понятие узла, который может представлять визуальное содержимое, вводится интерфейсом Element. Экземпляр объекта Element представляет собой отдельный элемент в документе, созданном с помощью HTML или лексикона XML, например, SVG.

Structure of a document with elements inside a document in a window

Хотя интерфейс Document определяется как часть спецификации DOM, спецификация HTML существенно расширяет его, добавляя информацию, специфичную для использования DOM в контексте веб-браузера, а также для представления HTML-документов.

Среди того, что добавлено к Document стандартом HTML, находятся:

Поддержка доступа к различной информации, предоставляемой заголовками HTTP при загрузке страницы, такой как местоположение, из которого был загружен документ, куки, дата изменения, ссылка на источник и так далее.
Доступ к спискам элементов в блоке <head> и body документа, а также списки изображений, ссылок, скриптов и т.д., содержащихся в документе.
Поддержка взаимодействия с пользователем путём проверки фокуса и выполнения команд на редактируемом содержимом.
Обработчики событий для событий документа, определённых стандартом HTML, позволяющие получить доступ к событиям мыши и клавиатуры, перетаскиванию, управлению медиа и др.
Обработчики событий для событий, которые могут быть переданы как элементам, так и документам; в настоящее время к ним относятся только действия копирования, вырезания и вставки.

Интерфейсы HTML-элементов

Интерфейс Element был дополнительно адаптирован для представления HTML-элементов путём введения интерфейса HTMLElement, от которого наследуют все более конкретные классы HTML-элементов. Это расширяет класс Element, добавляя общие функции, специфичные для HTML, к узлам элементов. Добавляемые свойствами HTMLElement включают, например, hidden и innerText.

HTML-документ — это дерево DOM, в котором каждый узел представляет собой HTML-элемент, представленный интерфейсом HTMLElement. Класс HTMLElement, в свою очередь, реализует Node, поэтому каждый элемент также является узлом (но не наоборот). Таким образом, структурные функции, реализованные интерфейсом Node, также доступны для HTML-элементов, позволяя им быть вложенными друг в друга, создаваться и удаляться, перемещаться и т.д.

Интерфейс HTMLElement является общим, однако предоставляет только функциональность, общую для всех HTML-элементов, такую как идентификатор элемента, его координаты, HTML, составляющий элемент, информация о положении полосы прокрутки и т.д.

Для расширения функциональности основного интерфейса HTMLElement с целью предоставления функций, необходимых для определённого элемента, класс HTMLElement расширяется, добавляя необходимые свойства и методы. Например, элемент <canvas> представлен объектом типа HTMLCanvasElement. HTMLCanvasElement дополняет тип HTMLElement, добавляя свойства, такие как height, и методы, такие как getContext(), для обеспечения функций, специфичных для холста.

Общая иерархия наследования для классов HTML-элементов выглядит следующим образом:

Hierarchy of interfaces for HTML elements

Таким образом, элемент наследует свойства и методы всех своих предков. Например, рассмотрим элемент <a>, который представлен в DOM объектом типа HTMLAnchorElement. Элемент, тогда, включает свойства и методы, специфичные для якоря, описанные в документации этого класса, но также и те, что определены HTMLElement и Element, а также из Node и, наконец, EventTarget.

Каждый уровень определяет ключевой аспект полезности элемента. Из Node, элемент наследует понятия, связанные со способностью элемента содержаться другим элементом и содержать другие элементы сам. Особое значение имеет то, что получено при наследовании от EventTarget: способность получать и обрабатывать события, такие как щелчки мыши, события воспроизведения и паузы и т.д.

Существуют элементы, которые обладают общими чертами и, следовательно, имеют дополнительный промежуточный тип. Например, элементы <audio> и <video> оба представляют аудиовизуальные медиа. Соответствующие типы, HTMLAudioElement и HTMLVideoElement, оба основаны на общем типе HTMLMediaElement, который, в свою очередь, основан на HTMLElement и так далее. HTMLMediaElement определяет методы и свойства, общие для аудио и видео элементов.

Эти специфичные для элементов интерфейсы составляют большую часть API HTML DOM и являются предметом этой статьи. Чтобы узнать больше о фактической структуре DOM, см. Введение в DOM.

Целевая аудитория API HTML DOM

Функции, предоставляемые HTML DOM, являются одними из наиболее часто используемых API в инструментарии веб-разработчика. Практически все веб-приложения, кроме самых простых, используют некоторые функции HTML DOM.

Интерфейсы API HTML DOM

Большинство интерфейсов, составляющих API HTML DOM, отображаются практически один к одному для отдельных HTML-элементов или для небольшой группы элементов с похожей функциональностью. Кроме того, API HTML DOM включает несколько интерфейсов и типов для поддержки интерфейсов HTML-элементов.

Интерфейсы HTML-элементов

Эти интерфейсы представляют конкретные HTML-элементы (или наборы связанных элементов, у которых есть одинаковые свойства и методы).

Устаревшие интерфейсы HTML-элементов

HTMLMarqueeElement Устаревший

Заменённые интерфейсы HTML-элементов

HTMLFontElement Устаревший
HTMLFrameElement Устаревший
HTMLFrameSetElement Устаревший

Интерфейсы интеграции веб-приложений и браузера

Эти интерфейсы предоставляют доступ к окну браузера и документу, содержащему HTML, а также к состоянию браузера, доступным плагинам (при наличии) и различным параметрам конфигурации.

Устаревшие интерфейсы интеграции веб-приложений и браузера

External Устаревший

Заменённые интерфейсы интеграции веб-приложений и браузера

Plugin Устаревший
PluginArray Устаревший

Интерфейсы поддержки форм

Эти интерфейсы обеспечивают структуру и функциональность, необходимые элементам для создания и управления формами, включая элементы <form> и <input>.

Интерфейсы холста и изображений

Эти интерфейсы представляют объекты, используемые API холста, а также элемент <img> и элементы <picture>.

Интерфейсы медиа

Интерфейсы медиа предоставляют доступ к содержимому медиа-элементов: <audio> и <video>.

Интерфейсы перетаскивания

Эти интерфейсы используются API перетаскивания HTML для представления отдельных элементов, которые можно перетаскивать (или перетаскиваются), групп перетаскиваемых или перетаскиваемых элементов, а также для обработки процесса перетаскивания.

Интерфейсы истории страниц

Интерфейсы API истории позволяют получить доступ к информации об истории браузера, а также перейти вперед и назад по этой истории в текущей вкладке браузера.

Интерфейсы Web Components

Эти интерфейсы используются API Web Components для создания и управления доступными пользовательскими элементами.

CustomElementRegistry

Разнообразные и вспомогательные интерфейсы

Эти вспомогательные типы объектов используются разнообразными способами в API HTML DOM. Кроме того, PromiseRejectionEvent представляет событие, которое передаётся, когда JavaScript Promise отклоняется.

Интерфейсы, относящиеся к другим API

Несколько интерфейсов технически определены в спецификации HTML, но фактически являются частью других API.

Интерфейсы Web Storage

API Web Storage предоставляет возможность веб-сайтам хранить данные временно или постоянно на устройстве пользователя для последующего использования.

Интерфейсы Web Workers

Эти интерфейсы используются API Web Workers как для обеспечения возможности взаимодействия работников с приложением и его содержимым, так и для поддержки обмена сообщениями между окнами или приложениями.

Интерфейсы WebSocket

Эти интерфейсы, определённые спецификацией HTML, используются API WebSocket.

Интерфейсы событий, отправляемых сервером

Интерфейс EventSource представляет собой источник, который отправил или отправляет события, отправляемые сервером.

EventSource

Примеры

В этом примере отслеживается событие <input> элемента input, чтобы обновить состояние кнопки "отправить" формы в зависимости от того, есть ли значение в данном поле.

JavaScript

const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");

sendButton.disabled = true;
// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
//nameField.focus();

nameField.addEventListener("input", (event) => {
  const elem = event.target;
  const valid = elem.value.length !== 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});

Этот код использует метод Document интерфейса getElementById() для получения объекта DOM, представляющего <input> элементы с идентификаторами userName и sendButton. С помощью этих элементов мы можем получить доступ к свойствам и методам, предоставляющим информацию и управление этими элементами.

Объект HTMLInputElement для свойства disabled кнопки "Отправить" устанавливается в true, что отключает кнопку "Отправить", так что на неё нельзя нажать. Кроме того, поле ввода имени пользователя становится активным фокусом, вызывая метод focus(), унаследованный от HTMLElement.

Затем вызывается addEventListener() для добавления обработчика события input к полю ввода имени пользователя. Этот код проверяет длину текущего значения ввода; если оно равно нулю, то кнопка "Отправить" отключается, если она ещё не отключена. В противном случае код гарантирует, что кнопка включена.

Благодаря этому кнопка "Отправить" всегда включена, когда в поле ввода имени пользователя есть значение, и выключается, когда оно пустое.

HTML

HTML для формы выглядит следующим образом:

<p>Please provide the information below. Items marked with "*" are required.</p>
<form action="" method="get">
  <p>
    <label for="userName" required>Your name:</label>
    <input type="text" id="userName" /> (*)
  </p>
  <p>
    <label for="userEmail">Email:</label>
    <input type="email" id="userEmail" />
  </p>
  <input type="submit" value="Send" id="sendButton" />
</form>

Результат

Спецификации

Спецификация
HTML # htmlelement

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android

END_OF_DOCUMENT_MARKER

`HTML_DOM_API`	1	12	1	8	1	18	4	10.1	1	1.0	1
`accessKey`	17	12	5	≤12.1	6	18	5	≤12.1	6	1.0	4.4
`accessKeyLabel`	Нет	Нет	8	Нет	14	Нет	8	Нет	14	Нет	Нет
`anchorElement`	превью	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет
`attachInternals`	77	79	93	64	16.4	77	93	55	16.4	12.0	77
`attributeStyleMap`	66	79	Нет	53	16.4	66	Нет	47	16.4	9.0	66
`autocapitalize`	66 43–66 Поддерживается только в `HTMLInputElement` и `HTMLTextAreaElement`.	79	111	53 30–53 Поддерживается только в `HTMLInputElement` и `HTMLTextAreaElement`.	Нет	66 43–66 Поддерживается только в `HTMLInputElement` и `HTMLTextAreaElement`.	111	47 30–47 Поддерживается только в `HTMLInputElement` и `HTMLTextAreaElement`.	10.3 ≤3–10.3 Поддерживается только в `HTMLFormElement`, `HTMLInputElement`, и `HTMLTextAreaElement`.	9.0 4.0–9.0 Поддерживается только в `HTMLInputElement` и `HTMLTextAreaElement`.	66 43–66 Поддерживается только в `HTMLInputElement` и `HTMLTextAreaElement`.

END_OF_DOCUMENT_MARKER

`dragend_event`	1	12	9	12	3.1	18	9	12	2	1.0	4.4
`dragenter_event`	1	12	9	12	3.1	18	9	12	2	1.0	4.4
`dragexit_event`	Нет	12–79	3.5	12	3.1	Нет	4	Нет	Нет	Нет	Нет
`draggable`	4	12	2	12	5	18	4	12	4	1.0	4.4
`dragleave_event`	1	12	9	12	3.1	18	9	12	2	1.0	4.4
`dragover_event`	1	12	9	12	3.1	18	9	12	2	1.0	4.4

`outerText`	1	12	98	≤12.1	1.3	18	98	≤12.1	1	1.0	1
`popover`	114	114	125	100	17	114	125	76	18.3 17–18.3 На iOS и iPadOS всплывающие окна не закрываются при нажатии за пределами области всплывающего окна, см. ошибку 267688.	23.0	114
`showPopover`	114	114	125	100	17	114	125	76	17	23.0	114
`spellcheck`	9	12	2	≤12.1	5.1	18	4	≤12.1	5	1.0	3
`style`	1	12	1	8	3	18	4	10.1	1	1.0	4.4
`tabIndex`	1	18 12 Возвращает неправильное значение для элементов без явного атрибута tabindex. Подробнее см. проблему 4365703.	1	≤12.1	3.1	18	4	≤12.1	2	1.0	4.4
`title`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4
`togglePopover`	114	114	125	100	17	114	125	76	17	23.0	114
`toggle_event`	36	79	49	23	10.1	36	49	24	10.3	3.0	37
`translate`	19	79	111	15	6	25	111	14	6	1.5	4.4
`virtualKeyboardPolicy`	94	94	Нет	80	Нет	94	Нет	66	Нет	17.0	94
`writingSuggestions`	124	124	Нет	110	18	124	Нет	82	18	27.0	124

См. также

Справочная информация

Руководства

Введение в сценарии DOM

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API