ElementInternals
Базовая версия 2023 *
Новое
С марта 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.
* Некоторые части этой функции могут иметь разную степень поддержки.
Интерфейс ElementInternals объектной модели документа позволяет веб-разработчикам настроить пользовательские элементы для работы с HTML-формами. Он предоставляет утилиты для работы с этими элементами так же, как и со стандартными HTML-элементами форм, а также предоставляет доступ к модели доступности объектов для элемента.
Конструктор
У этого интерфейса нет конструктора. Объект ElementInternals возвращается при вызове HTMLElement.attachInternals().
Свойства экземпляра
-
ElementInternals.shadowRootТолько для чтения -
Возвращает объект
ShadowRoot, связанный с этим элементом. -
ElementInternals.formТолько для чтения -
Возвращает связанный с этим элементом
HTMLFormElement. -
ElementInternals.statesТолько для чтения -
Возвращает связанный с этим элементом
CustomStateSet. -
ElementInternals.willValidateТолько для чтения -
Булево значение, которое возвращает true, если элемент является элементом для отправки, который является кандидатом для валидации ограничений.
-
ElementInternals.validityТолько для чтения -
Возвращает объект
ValidityState, представляющий различные состояния валидности элемента с точки зрения валидации ограничений. -
ElementInternals.validationMessageТолько для чтения -
Строка, содержащая сообщение об ошибке валидации этого элемента.
-
ElementInternals.labelsТолько для чтения -
Возвращает
NodeListвсех элементов метки, связанных с этим элементом.
Свойства экземпляра, включенные из ARIA
Интерфейс ElementInternals также включает следующие свойства.
Примечание: Они включены для определения стандартной семантики доступности в пользовательском элементе. Их можно перезаписать определёнными автором атрибутами, но убедитесь, что стандартная семантика сохраняется, если автор удалит эти атрибуты или не добавит их вовсе. Для получения дополнительной информации см. объяснение модели доступности объектов.
ElementInternals.ariaAtomic-
Строка, отражающая атрибут
aria-atomic, который указывает, будут ли вспомогательные технологии отображать все или только части изменённой области на основе уведомлений об изменениях, определённых атрибутомaria-relevant. ElementInternals.ariaAutoComplete-
Строка, отражающая атрибут
aria-autocomplete, который указывает, может ли ввод текста вызвать отображение одного или нескольких предложений предполагаемого значения пользователем для раскрывающегося списка, поля поиска или текстового поля, и указывает, как будут представлены предложения, если они будут сделаны. ElementInternals.ariaBusy-
Строка, отражающая атрибут
aria-busy, который указывает, модифицируется ли элемент, так как вспомогательные технологии могут захотеть подождать, пока изменения не будут завершены, прежде чем отобразить их пользователю. ElementInternals.ariaChecked-
Строка, отражающая атрибут
aria-checked, который указывает текущее состояние «выбрано» для флажков, радиокнопок и других виджетов, имеющих состояние «выбрано». ElementInternals.ariaColCount-
Строка, отражающая атрибут
aria-colcount, который определяет количество столбцов в таблице, сетке или дереве сетки. ElementInternals.ariaColIndex-
Строка, отражающая атрибут
aria-colindex, который определяет индекс или позицию столбца элемента по отношению к общему количеству столбцов в таблице, сетке или дереве сетки. ElementInternals.ariaColIndexText-
Строка, отражающая атрибут
aria-colindextext, который определяет удобочитаемый текстовый эквивалент aria-colindex. ElementInternals.ariaColSpan-
Строка, отражающая атрибут
aria-colspan, который определяет количество столбцов, занимаемых ячейкой или ячейкой сетки в таблице, сетке или дереве сетки. ElementInternals.ariaCurrent-
Строка, отражающая атрибут
aria-current, который указывает элемент, представляющий текущий элемент в контейнере или наборе связанных элементов. ElementInternals.ariaDescription-
Строка, отражающая атрибут
aria-description, который определяет строковое значение, описывающее или комментирующее текущий ElementInternals. ElementInternals.ariaDisabled-
Строка, отражающая атрибут
aria-disabled, который указывает, что элемент воспринимается, но отключён, поэтому он не может быть отредактирован или иным образом использован. ElementInternals.ariaExpanded-
Строка, отражающая атрибут
aria-expanded, который указывает, раскрыт или свёрнут ли элемент группирования, принадлежащий или управляемый этим элементом. ElementInternals.ariaHasPopup-
Строка, отражающая атрибут
aria-haspopup, который указывает доступность и тип интерактивного всплывающего элемента, такого как меню или диалоговое окно, который может быть вызван ElementInternals. -
Строка, отражающая атрибут
aria-hidden, который указывает, доступен ли элемент к API для обеспечения доступности. ElementInternals.ariaKeyShortcuts-
Строка, отражающая атрибут
aria-keyshortcuts, который указывает сочетания клавиш, которые автор реализовал для активации или фокусировки ElementInternals. ElementInternals.ariaLabel-
Строка, отражающая атрибут
aria-label, который определяет строковое значение, маркирующее текущий ElementInternals. ElementInternals.ariaLevel-
Строка, отражающая атрибут
aria-level, который определяет иерархический уровень элемента в структуре. ElementInternals.ariaLive-
Строка, отражающая атрибут
aria-live, который указывает, что элемент будет обновлён, и описывает типы обновлений, которые могут ожидать агенты пользователя, вспомогательные технологии и пользователь от области динамического обновления. ElementInternals.ariaModal-
Строка, отражающая атрибут
aria-modal, который указывает, является ли элемент модальным при отображении. ElementInternals.ariaMultiline-
Строка, отражающая атрибут
aria-multiline, который указывает, принимает ли текстовое поле несколько строк ввода или только одну. ElementInternals.ariaMultiSelectable-
Строка, отражающая атрибут
aria-multiselectable, который указывает, что пользователь может выбрать более одного элемента из текущих выбираемых потомков. ElementInternals.ariaOrientation-
Строка, отражающая атрибут
aria-orientation, который указывает, является ли ориентация элемента горизонтальной, вертикальной или неизвестной/неопределённой. ElementInternals.ariaPlaceholder-
Строка, отражающая атрибут
aria-placeholder, который определяет краткое подсказку, предназначенную для помощи пользователю с вводом данных, когда у элемента нет значения. ElementInternals.ariaPosInSet-
Строка, отражающая атрибут
aria-posinset, который определяет номер или позицию элемента в текущем наборе элементов списка или дерева. ElementInternals.ariaPressed-
Строка, отражающая атрибут
aria-pressed, который указывает текущее состояние «нажато» переключательных кнопок. ElementInternals.ariaReadOnly-
Строка, отражающая атрибут
aria-readonly, который указывает, что элемент не может быть отредактирован, но может быть использован иначе. -
ElementInternals.ariaRelevantНестандартно -
Строка, отражающая атрибут
aria-relevant, который указывает, какие уведомления агент пользователя будет генерировать, когда дерево доступности в области динамического обновления изменится. Это используется для описания изменений в области динамического обновления, которые имеют отношение и должны быть объявлены. ElementInternals.ariaRequired-
Строка, отражающая атрибут
aria-required, который указывает, что пользовательский ввод необходим на элементе перед отправкой формы. ElementInternals.role
-
Строка, содержащая роль ARIA. Полный список ролей ARIA можно найти на странице техники ARIA.
ElementInternals.ariaRoleDescription-
Строка, отражающая атрибут
aria-roledescription, который определяет удобочитаемое, локализованное описание роли элемента. ElementInternals.ariaRowCount-
Строка, отражающая атрибут
aria-rowcount, который определяет общее количество строк в таблице, сетке или таблице-дереве. ElementInternals.ariaRowIndex-
Строка, отражающая атрибут
aria-rowindex, который определяет индекс строки элемента или его позицию по отношению к общему количеству строк в таблице, сетке или таблице-дереве. ElementInternals.ariaRowIndexText-
Строка, отражающая атрибут
aria-rowindextext, который определяет удобочитаемый текстовый эквивалент aria-rowindex. ElementInternals.ariaRowSpan-
Строка, отражающая атрибут
aria-rowspan, который определяет количество строк, занимаемых ячейкой или ячейкой сетки в таблице, сетке или таблице-дереве. ElementInternals.ariaSelected-
Строка, отражающая атрибут
aria-selected, который указывает текущее состояние "выбранного" элементов, имеющих состояние выбора. ElementInternals.ariaSetSize-
Строка, отражающая атрибут
aria-setsize, который определяет количество элементов в текущем наборе элементов списка или элементов дерева. ElementInternals.ariaSort-
Строка, отражающая атрибут
aria-sort, который указывает, отсортированы ли элементы в таблице или сетке по возрастанию или убыванию. ElementInternals.ariaValueMax-
Строка, отражающая атрибут
aria-valueMax, который определяет максимальное разрешённое значение для виджета диапазона. ElementInternals.ariaValueMin-
Строка, отражающая атрибут
aria-valueMin, который определяет минимальное разрешённое значение для виджета диапазона. ElementInternals.ariaValueNow-
Строка, отражающая атрибут
aria-valueNow, который определяет текущее значение для виджета диапазона. ElementInternals.ariaValueText-
Строка, отражающая атрибут
aria-valuetext, который определяет удобочитаемый текстовый эквивалент aria-valuenow для виджета диапазона.
Методы экземпляра
ElementInternals.setFormValue()-
Устанавливает значение и состояние отправки элемента, сообщая об этом пользовательскому агенту.
ElementInternals.setValidity()-
Устанавливает валидность элемента.
ElementInternals.checkValidity()-
Проверяет, соответствует ли элемент правилам валидации ограничений, применённым к нему.
ElementInternals.reportValidity()-
Проверяет, соответствует ли элемент правилам валидации ограничений, применённым к нему, и отправляет сообщение о валидации пользовательскому агенту.
Примеры
В следующем примере показано, как создать пользовательский элемент, связанный с формой, с помощью HTMLElement.attachInternals.
class CustomCheckbox extends HTMLElement {
static formAssociated = true;
constructor() {
super();
this.internals_ = this.attachInternals();
}
// …
}
window.customElements.define("custom-checkbox", CustomCheckbox);
let element = document.createElement("custom-checkbox");
let form = document.createElement("form");
// Append element to form to associate it
form.appendChild(element);
console.log(element.internals_.form);
// expected output: <form><custom-checkbox></custom-checkbox></form>
Спецификации
| Спецификация |
|---|
| HTML # the-elementinternals-interface |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
ElementInternals |
77 | 79 | 93 | 64 | 16.4 | 77 | 93 | 55 | 16.4 | 12.0 | 77 |
|---|---|---|---|---|---|---|---|---|---|---|---|
ariaActiveDescendantElement |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaAtomic |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaAutoComplete |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaBrailleLabel |
107 | 107 | 125 | 93 | 18 | 107 | 125 | 73 | 18 | 21.0 | 107 |
ariaBrailleRoleDescription |
107 | 107 | 125 | 93 | 18 | 107 | 125 | 73 | 18 | 21.0 | 107 |
ariaBusy |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaChecked |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaColCount |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaColIndex |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaColIndexText |
128 | 128 | 119 | 114 | Нет | 128 | 119 | 85 | Нет | Нет | 128 |
ariaColSpan |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaControlsElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaCurrent |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaDescribedByElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaDescription |
83 | 83 | 119 | 69 | Нет | 83 | 119 | 59 | Нет | 13.0 | 83 |
ariaDetailsElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaDisabled |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaErrorMessageElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaExpanded |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaFlowToElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaHasPopup |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaHidden |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaInvalid |
102 | 102 | 119 | 88 | 16.4 | 102 | 119 | 70 | 16.4 | 19.0 | 102 |
ariaKeyShortcuts |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaLabel |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaLabelledByElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
|---|---|---|---|---|---|---|---|---|---|---|---|
ariaLevel |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaLive |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaModal |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaMultiLine |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaMultiSelectable |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaOrientation |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaOwnsElements |
Нет | Нет | Нет | Нет | 16.4 | Нет | Нет | Нет | 16.4 | Нет | Нет |
ariaPlaceholder |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaPosInSet |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaPressed |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaReadOnly |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaRelevant |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaRequired |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaRoleDescription |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaRowCount |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaRowIndex |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaRowIndexText |
128 | 128 | 119 | 114 | Нет | 128 | 119 | 85 | Нет | Нет | 128 |
ariaRowSpan |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaSelected |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaSetSize |
84 | 84 | 119 | 70 | 16.4 | 84 | 119 | 60 | 16.4 | 14.0 | 84 |
ariaSort |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaValueMax |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaValueMin |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaValueNow |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
ariaValueText |
81 | 81 | 119 | 68 | 16.4 | 81 | 119 | 58 | 16.4 | 13.0 | 81 |
checkValidity |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
|---|---|---|---|---|---|---|---|---|---|---|---|
form |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
labels |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
reportValidity |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
role |
103 | 103 | 119 | 89 | 16.4 | 103 | 119 | 71 | 16.4 | 20.0 | 103 |
setFormValue |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
setValidity |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
shadowRoot |
88 | 88 | 93 | 74 | 16.4 | 88 | 93 | 63 | 16.4 | 15.0 | 88 |
states |
90 | 90 | 126 | 76 | 17.4 | 90 | 126 | 64 | 17.4 | 15.0 | 90 |
validationMessage |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
validity |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
willValidate |
77 | 79 | 98 | 64 | 16.4 | 77 | 98 | 55 | 16.4 | 12.0 | 77 |
См. также
© 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/ElementInternals