ElementInternals

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Schnittstelle ElementInternals des Document Object Model bietet Webentwicklern eine Möglichkeit, benutzerdefinierte Elemente vollständig an HTML-Formularen teilnehmen zu lassen. Sie stellt Hilfsfunktionen bereit, um mit diesen Elementen auf dieselbe Weise wie mit jedem Standard-HTML-Formularelement zu arbeiten, und macht außerdem das Accessibility Object Model für das Element verfügbar.

Konstruktor

Diese Schnittstelle hat keinen Konstruktor. Ein ElementInternals-Objekt wird beim Aufruf von HTMLElement.attachInternals() zurückgegeben.

Instanzeigenschaften

ElementInternals.shadowRoot Schreibgeschützt: Gibt das diesem Element zugeordnete ShadowRoot-Objekt zurück.
ElementInternals.form Schreibgeschützt: Gibt das diesem Element zugeordnete HTMLFormElement zurück.
ElementInternals.states Schreibgeschützt: Gibt das diesem Element zugeordnete CustomStateSet zurück.
ElementInternals.willValidate Schreibgeschützt: Ein boolescher Wert, der true zurückgibt, wenn das Element ein absendbares Element ist, das für die Constraint-Validierung infrage kommt.
ElementInternals.validity Schreibgeschützt: Gibt ein ValidityState-Objekt zurück, das die verschiedenen Gültigkeitszustände darstellt, in denen sich das Element bezüglich der Constraint-Validierung befinden kann.
ElementInternals.validationMessage Schreibgeschützt: Ein String, der die Validierungsmeldung dieses Elements enthält.
ElementInternals.labels Schreibgeschützt: Gibt eine NodeList aller diesem Element zugeordneten Label-Elemente zurück.

Aus ARIA enthaltene Instanzeigenschaften

Die Schnittstelle ElementInternals enthält außerdem die folgenden Eigenschaften.

Hinweis: Diese sind enthalten, damit für ein benutzerdefiniertes Element standardmäßige Barrierefreiheitssemantik definiert werden kann. Sie können durch vom Autor definierte Attribute überschrieben werden, stellen jedoch sicher, dass die Standardsemantik erhalten bleibt, falls der Autor diese Attribute löscht oder sie gar nicht erst hinzufügt. Weitere Informationen finden Sie in der Erklärung zum Accessibility Object Model.

ElementInternals.ariaAtomic: Ein String, der das Attribut aria-atomic widerspiegelt. Dieses gibt an, ob assistive Technologien basierend auf den durch das Attribut aria-relevant definierten Änderungsbenachrichtigungen die gesamte geänderte Region oder nur Teile davon präsentieren.
ElementInternals.ariaAutoComplete: Ein String, der das Attribut aria-autocomplete widerspiegelt. Dieses gibt an, ob die Texteingabe die Anzeige einer oder mehrerer Vorhersagen des vom Benutzer beabsichtigten Werts für eine combobox, searchbox oder textbox auslösen könnte, und legt fest, wie Vorhersagen präsentiert würden, falls sie erstellt werden.
ElementInternals.ariaBrailleLabel: Ein String, der das Attribut aria-braillelabel widerspiegelt. Dieses definiert die Braillebeschriftung des Elements.
ElementInternals.ariaBrailleRoleDescription: Ein String, der das Attribut aria-brailleroledescription widerspiegelt. Dieses definiert die ARIA-Braille-Rollenbeschreibung des Elements.
ElementInternals.ariaBusy: Ein String, der das Attribut aria-busy widerspiegelt. Dieses gibt an, ob ein Element verändert wird, da assistive Technologien möglicherweise warten möchten, bis die Änderungen abgeschlossen sind, bevor sie sie dem Benutzer bereitstellen.
ElementInternals.ariaChecked: Ein String, der das Attribut aria-checked widerspiegelt. Dieses gibt den aktuellen Zustand „ausgewählt“ von Kontrollkästchen, Optionsfeldern und anderen Widgets mit einem ausgewählten Zustand an.
ElementInternals.ariaColCount: Ein String, der das Attribut aria-colcount widerspiegelt. Dieses definiert die Anzahl der Spalten in einer Tabelle, einem Grid oder einem treegrid.
ElementInternals.ariaColIndex: Ein String, der das Attribut aria-colindex widerspiegelt. Dieses definiert den Spaltenindex oder die Position eines Elements in Bezug auf die Gesamtzahl der Spalten innerhalb einer Tabelle, eines Grid oder eines treegrid.
ElementInternals.ariaColIndexText: Ein String, der das Attribut aria-colindextext widerspiegelt. Dieses definiert eine für Menschen lesbare Textalternative für aria-colindex.
ElementInternals.ariaColSpan: Ein String, der das Attribut aria-colspan widerspiegelt. Dieses definiert die Anzahl der Spalten, die eine cell oder gridcell innerhalb einer Tabelle, eines Grid oder eines treegrid überspannt.
ElementInternals.ariaCurrent: Ein String, der das Attribut aria-current widerspiegelt. Dieses gibt das Element an, das das aktuelle Element innerhalb eines Containers oder einer Menge verwandter Elemente darstellt.
ElementInternals.ariaDescription: Ein String, der das Attribut aria-description widerspiegelt. Dieses definiert einen String-Wert, der die aktuellen ElementInternals beschreibt oder annotiert.
ElementInternals.ariaDisabled: Ein String, der das Attribut aria-disabled widerspiegelt. Dieses gibt an, dass das Element wahrnehmbar, jedoch deaktiviert ist und daher weder bearbeitet noch anderweitig bedient werden kann.
ElementInternals.ariaExpanded: Ein String, der das Attribut aria-expanded widerspiegelt. Dieses gibt an, ob ein Gruppierungselement, das diesem Element gehört oder von ihm gesteuert wird, ausgeklappt oder eingeklappt ist.
ElementInternals.ariaHasPopup: Ein String, der das Attribut aria-haspopup widerspiegelt. Dieses gibt die Verfügbarkeit und den Typ eines interaktiven Popup-Elements an, etwa eines Menüs oder Dialogs, das durch ein ElementInternals ausgelöst werden kann.
ElementInternals.ariaHidden: Ein String, der das Attribut aria-hidden widerspiegelt. Dieses gibt an, ob das Element für eine Barrierefreiheits-API verfügbar gemacht wird.
ElementInternals.ariaInvalid: Ein String, der das Attribut aria-invalid widerspiegelt. Dieses gibt an, dass der eingegebene Wert nicht dem von der Anwendung erwarteten Format entspricht.
ElementInternals.ariaKeyShortcuts: Ein String, der das Attribut aria-keyshortcuts widerspiegelt. Dieses gibt Tastenkürzel an, die ein Autor implementiert hat, um ein Objekt zu aktivieren oder ihm den Fokus zu geben.
ElementInternals.ariaLabel: Ein String, der das Attribut aria-label widerspiegelt. Dieses definiert einen String-Wert, der das aktuelle Objekt beschriftet.
ElementInternals.ariaLevel: Ein String, der das Attribut aria-level widerspiegelt. Dieses definiert die hierarchische Ebene eines Elements innerhalb einer Struktur.
ElementInternals.ariaLive: Ein String, der das Attribut aria-live widerspiegelt. Dieses gibt an, dass ein Element aktualisiert wird, und beschreibt die Arten von Aktualisierungen, die Benutzeragenten, assistive Technologien und Benutzer von der Live-Region erwarten können.
ElementInternals.ariaModal: Ein String, der das Attribut aria-modal widerspiegelt. Dieses gibt an, ob ein Element bei seiner Anzeige modal ist.
ElementInternals.ariaMultiline: Ein String, der das Attribut aria-multiline widerspiegelt. Dieses gibt an, ob ein Textfeld mehrzeilige Eingaben oder nur eine einzelne Zeile akzeptiert.
ElementInternals.ariaMultiSelectable: Ein String, der das Attribut aria-multiselectable widerspiegelt. Dieses gibt an, dass der Benutzer mehr als ein Element aus den aktuell auswählbaren Nachfolgerelementen auswählen darf.
ElementInternals.ariaOrientation: Ein String, der das Attribut aria-orientation widerspiegelt. Dieses gibt an, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist.
ElementInternals.ariaPlaceholder: Ein String, der das Attribut aria-placeholder widerspiegelt. Dieses definiert einen kurzen Hinweis, der den Benutzer bei der Dateneingabe unterstützen soll, wenn das Steuerelement keinen Wert hat.
ElementInternals.ariaPosInSet: Ein String, der das Attribut aria-posinset widerspiegelt. Dieses definiert die Nummer oder Position eines Elements in der aktuellen Menge von listitems oder treeitems.
ElementInternals.ariaPressed: Ein String, der das Attribut aria-pressed widerspiegelt. Dieses gibt den aktuellen Zustand „gedrückt“ von Umschaltschaltflächen an.
ElementInternals.ariaReadOnly: Ein String, der das Attribut aria-readonly widerspiegelt. Dieses gibt an, dass das Element nicht bearbeitbar, aber anderweitig bedienbar ist.
ElementInternals.ariaRelevant: Ein String, der das Attribut aria-relevant widerspiegelt. Dieses gibt an, welche Benachrichtigungen der Benutzeragent auslöst, wenn der Barrierefreiheitsbaum innerhalb einer Live-Region verändert wird. Es wird verwendet, um zu beschreiben, welche Änderungen in einer aria-live-Region relevant sind und angekündigt werden sollten.
ElementInternals.ariaRequired: Ein String, der das Attribut aria-required widerspiegelt. Dieses gibt an, dass eine Benutzereingabe für das Element erforderlich ist, bevor ein Formular abgesendet werden darf.
ElementInternals.role: Ein String, der eine ARIA-Rolle enthält. Eine vollständige Liste der ARIA-Rollen finden Sie auf der Seite zu ARIA-Techniken.
ElementInternals.ariaRoleDescription: Ein String, der das Attribut aria-roledescription widerspiegelt. Dieses definiert eine für Menschen lesbare, vom Autor lokalisierte Beschreibung der Rolle eines Element.
ElementInternals.ariaRowCount: Ein String, der das Attribut aria-rowcount widerspiegelt. Dieses definiert die Gesamtzahl der Zeilen in einer Tabelle, einem Grid oder einem treegrid.
ElementInternals.ariaRowIndex: Ein String, der das Attribut aria-rowindex widerspiegelt. Dieses definiert den Zeilenindex oder die Position eines Elements in Bezug auf die Gesamtzahl der Zeilen innerhalb einer Tabelle, eines Grid oder eines treegrid.
ElementInternals.ariaRowIndexText: Ein String, der das Attribut aria-rowindextext widerspiegelt. Dieses definiert eine für Menschen lesbare Textalternative für aria-rowindex.
ElementInternals.ariaRowSpan: Ein String, der das Attribut aria-rowspan widerspiegelt. Dieses definiert die Anzahl der Zeilen, die eine cell oder gridcell innerhalb einer Tabelle, eines Grid oder eines treegrid überspannt.
ElementInternals.ariaSelected: Ein String, der das Attribut aria-selected widerspiegelt. Dieses gibt den aktuellen Zustand „ausgewählt“ von Elementen mit einem ausgewählten Zustand an.
ElementInternals.ariaSetSize: Ein String, der das Attribut aria-setsize widerspiegelt. Dieses definiert die Anzahl der Elemente in der aktuellen Menge von listitems oder treeitems.
ElementInternals.ariaSort: Ein String, der das Attribut aria-sort widerspiegelt. Dieses gibt an, ob Elemente in einer Tabelle oder einem Grid in aufsteigender oder absteigender Reihenfolge sortiert sind.
ElementInternals.ariaValueMax: Ein String, der das Attribut aria-valueMax widerspiegelt. Dieses definiert den maximal zulässigen Wert für ein Range-Widget.
ElementInternals.ariaValueMin: Ein String, der das Attribut aria-valueMin widerspiegelt. Dieses definiert den minimal zulässigen Wert für ein Range-Widget.
ElementInternals.ariaValueNow: Ein String, der das Attribut aria-valueNow widerspiegelt. Dieses definiert den aktuellen Wert für ein Range-Widget.
ElementInternals.ariaValueText: Ein String, der das Attribut aria-valuetext widerspiegelt. Dieses definiert die für Menschen lesbare Textalternative von aria-valuenow für ein Range-Widget.

Instanzeigenschaften, die aus ARIA-Elementreferenzen widergespiegelt werden

Die Eigenschaften spiegeln die in den entsprechenden Attributen durch eine id-Referenz angegebenen Elemente wider, jedoch mit einigen Vorbehalten. Weitere Informationen finden Sie unter Widergespiegelte Elementreferenzen im Leitfaden Widergespiegelte Attribute.

ElementInternals.ariaActiveDescendantElement: Ein Element, das das aktuell aktive Element darstellt, wenn der Fokus auf einem composite-Widget, einer combobox, einer textbox, einer group oder einer application liegt. Spiegelt das Attribut aria-activedescendant wider.
ElementInternals.ariaControlsElements: Ein Array von Elementen, deren Inhalte oder Vorhandensein von dem Element gesteuert werden, auf das es angewendet wird. Spiegelt das Attribut aria-controls wider.
ElementInternals.ariaDescribedByElements: Ein Array von Elementen, die die barrierefreie Beschreibung für das Element enthalten, auf das es angewendet wird. Spiegelt das Attribut aria-describedby wider.
ElementInternals.ariaDetailsElements: Ein Array von Elementen, die barrierefreie Details für das Element bereitstellen, auf das es angewendet wird. Spiegelt das Attribut aria-details wider.
ElementInternals.ariaErrorMessageElements: Ein Array von Elementen, die eine Fehlermeldung für das Element bereitstellen, auf das es angewendet wird. Spiegelt das Attribut aria-errormessage wider.
ElementInternals.ariaFlowToElements: Ein Array von Elementen, die das nächste Element (oder die nächsten Elemente) in einer alternativen Lesereihenfolge des Inhalts kennzeichnen und nach Ermessen des Benutzers die allgemeine Standardlesereihenfolge überschreiben. Spiegelt das Attribut aria-flowto wider.
ElementInternals.ariaLabelledByElements: Ein Array von Elementen, die den barrierefreien Namen für das Element bereitstellen, auf das es angewendet wird. Spiegelt das Attribut aria-labelledby wider.
ElementInternals.ariaOwnsElements: Ein Array von Elementen, die dem Element gehören, auf das dies angewendet wird. Dies wird verwendet, um eine visuelle, funktionale oder kontextuelle Beziehung zwischen einem Eltern- und seinen Kindelementen zu definieren, wenn die DOM-Hierarchie nicht zur Darstellung der Beziehung verwendet werden kann. Spiegelt das Attribut aria-owns wider.

Instanzmethoden

ElementInternals.setFormValue(): Legt den Übermittlungswert und Zustand des Elements fest und übermittelt diese an den Benutzeragenten.
ElementInternals.setValidity(): Legt die Gültigkeit des Elements fest.
ElementInternals.checkValidity(): Prüft, ob ein Element alle auf es angewendeten Regeln der Constraint-Validierung erfüllt.
ElementInternals.reportValidity(): Prüft, ob ein Element alle auf es angewendeten Regeln der Constraint-Validierung erfüllt, und sendet außerdem eine Validierungsmeldung an den Benutzeragenten.

Beispiele

Das folgende Beispiel zeigt, wie Sie mit HTMLElement.attachInternals ein benutzerdefiniertes formularzugeordnetes Element erstellen.

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>

Spezifikationen

Spezifikation
HTML # the-elementinternals-interface

Browser-Kompatibilität

Siehe auch

Leistungsfähigere Formularsteuerelemente über web.dev (2019)
Erstellen benutzerdefinierter Formularsteuerelemente mit ElementInternals über CSS-tricks (2021)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden