HTML DOM API
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die HTML DOM API umfasst die Schnittstellen, die die Funktionalität der einzelnen Elemente in HTML definieren, sowie die unterstützenden Typen und Schnittstellen, auf denen diese beruhen.
Zu den Funktionsbereichen der HTML DOM API gehören:
- Zugriff auf und Steuerung von HTML-Elementen über das DOM.
- Zugriff auf und Bearbeitung von Formulardaten.
- Interaktion mit den Inhalten von 2D-Bildern und dem Kontext eines HTML-
<canvas>-Elements, beispielsweise um darauf zu zeichnen. - Verwaltung von Medien, die mit den HTML-Medienelementen (
<audio>und<video>) verknüpft sind. - Ziehen und Ablegen von Inhalten auf Webseiten.
- Zugriff auf den Navigationsverlauf des Browsers.
- Unterstützende und verbindende Schnittstellen für andere APIs wie Web Components, Web Storage, Web Workers, WebSocket und serverseitig gesendete Ereignisse.
Konzepte und Verwendung des HTML DOM
In diesem Artikel konzentrieren wir uns auf die Teile des HTML DOM, die die Interaktion mit HTML-Elementen betreffen. Informationen zu anderen Bereichen wie Drag and Drop, WebSockets und Web Storage finden Sie in der Dokumentation der jeweiligen APIs.
Struktur eines HTML-Dokuments
Das Document Object Model (DOM) ist eine Architektur, die die Struktur eines document beschreibt. Jedes Dokument wird durch eine Instanz der Schnittstelle Document repräsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Knoten. Ein Knoten ist ein grundlegender Datensatz, der ein einzelnes Objekt innerhalb des Dokuments repräsentiert, beispielsweise ein Element oder einen Textknoten.
Knoten können rein der Organisation dienen, indem sie andere Knoten gruppieren oder einen Ausgangspunkt für den Aufbau einer Hierarchie bieten. Andere Knoten können sichtbare Bestandteile eines Dokuments repräsentieren. Jeder Knoten basiert auf der Schnittstelle Node. Diese stellt Eigenschaften zum Abrufen von Informationen über den Knoten sowie Methoden zum Erstellen, Löschen und Organisieren von Knoten innerhalb des DOM bereit.
Knoten selbst enthalten nicht den Inhalt, der tatsächlich im Dokument angezeigt wird. Sie sind leere Behälter. Das grundlegende Konzept eines Knotens, der sichtbaren Inhalt repräsentieren kann, wird durch die Schnittstelle Element eingeführt. Eine Element-Objektinstanz repräsentiert ein einzelnes Element in einem Dokument, das mit HTML oder einem XML-Vokabular wie SVG erstellt wurde.
Betrachten Sie beispielsweise ein Dokument mit zwei Elementen, von denen eines zwei weitere verschachtelte Elemente enthält:
Die Schnittstelle Document ist zwar als Teil der DOM-Spezifikation definiert, wird durch die HTML-Spezifikation jedoch erheblich erweitert. Sie erhält dadurch Informationen, die speziell für die Verwendung des DOM im Kontext eines Webbrowsers und für die Darstellung von HTML-Dokumenten benötigt werden.
Zu den Ergänzungen des HTML-Standards für Document gehören:
- Unterstützung für den Zugriff auf verschiedene Informationen, die beim Laden der Seite durch HTTP-Header bereitgestellt werden, etwa der Ort, von dem das Dokument geladen wurde, Cookies, das Änderungsdatum und die verweisende Website.
- Zugriff auf Listen der Elemente im
<head>-Block und im body des Dokuments sowie auf Listen der darin enthaltenen Bilder, Links, Skripte und weiterer Inhalte. - Unterstützung für die Interaktion mit Benutzern durch Prüfen des Fokus und Ausführen von Befehlen auf bearbeitbaren Inhalten.
- Event-Handler für im HTML-Standard definierte Dokumentereignisse, die den Zugriff auf Maus- und Tastaturereignisse, Drag and Drop, die Mediensteuerung und weitere Funktionen ermöglichen.
- Event-Handler für Ereignisse, die sowohl an Elemente als auch an Dokumente übermittelt werden können. Dazu gehören derzeit nur die Aktionen
copy,cutundpaste.
Schnittstellen für HTML-Elemente
Die Schnittstelle Element wurde durch Einführung der Schnittstelle HTMLElement, von der alle spezifischeren HTML-Elementklassen erben, für die Darstellung von HTML-Elementen angepasst. Dadurch wird die Klasse Element um allgemeine HTML-spezifische Funktionen für Elementknoten erweitert. Zu den von HTMLElement hinzugefügten Eigenschaften gehören beispielsweise hidden und innerText.
Ein HTML-Dokument ist ein DOM-Baum, dessen Elementknoten HTML-Elemente sind, die durch die Schnittstelle HTMLElement repräsentiert werden. Die Klasse HTMLElement erbt wiederum von Node, sodass jedes Element auch ein Knoten ist – aber nicht jeder Knoten ein Element. Dadurch stehen die von der Schnittstelle Node bereitgestellten Strukturfunktionen auch HTML-Elementen zur Verfügung: Sie können ineinander verschachtelt, erstellt, gelöscht und verschoben werden.
Die Schnittstelle HTMLElement ist jedoch generisch und stellt nur Funktionen bereit, die allen HTML-Elementen gemeinsam sind. Dazu gehören beispielsweise die ID und die Koordinaten eines Elements, das HTML, aus dem es besteht, sowie Informationen zur Scrollposition.
Um die Kernfunktionalität der Schnittstelle HTMLElement um die für ein bestimmtes Element benötigten Funktionen zu erweitern, wird die Klasse HTMLElement durch Unterklassen mit den entsprechenden Eigenschaften und Methoden ergänzt. Das Element <canvas> wird beispielsweise durch ein Objekt des Typs HTMLCanvasElement repräsentiert. HTMLCanvasElement erweitert den Typ HTMLElement um Eigenschaften wie height und Methoden wie getContext(), die canvas-spezifische Funktionen bereitstellen.
Die Vererbungshierarchie der HTML-Elementklassen sieht insgesamt so aus:
Ein Element erbt somit die Eigenschaften und Methoden aller seiner Vorfahren. Betrachten Sie beispielsweise ein <a>-Element, das im DOM durch ein Objekt des Typs HTMLAnchorElement repräsentiert wird. Das Element verfügt über die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind. Darüber hinaus verfügt es über die Eigenschaften und Methoden von HTMLElement, Element, Node und schließlich EventTarget.
Jede Ebene trägt einen wesentlichen Teil zur Funktionalität des Elements bei. Von Node erbt das Element die Fähigkeit, in einem anderen Element enthalten zu sein und selbst andere Elemente zu enthalten. Besonders wichtig ist die von EventTarget geerbte Fähigkeit, Ereignisse wie Mausklicks sowie Wiedergabe- und Pausenereignisse zu empfangen und zu verarbeiten.
Einige Elemente haben Gemeinsamkeiten und verfügen deshalb über einen zusätzlichen gemeinsamen Zwischentyp. Die Elemente <audio> und <video> stellen beispielsweise beide audiovisuelle Medien dar. Ihre entsprechenden Typen HTMLAudioElement und HTMLVideoElement basieren auf dem gemeinsamen Typ HTMLMediaElement, der wiederum auf HTMLElement basiert. HTMLMediaElement definiert die Methoden und Eigenschaften, die Audio- und Videoelementen gemeinsam sind.
Diese elementspezifischen Schnittstellen machen den größten Teil der HTML DOM API aus und stehen im Mittelpunkt dieses Artikels. Der Artikel zum DOM bietet eine allgemeine Einführung in das DOM und seine Konzepte.
Zielgruppe des HTML DOM
Die vom HTML DOM bereitgestellten Funktionen gehören zu den am häufigsten verwendeten APIs im Werkzeugkasten der Webentwicklung. Mit Ausnahme der einfachsten Webanwendungen nutzen nahezu alle Webanwendungen einige Funktionen des HTML DOM.
Schnittstellen der HTML DOM API
Die meisten Schnittstellen der HTML DOM API entsprechen nahezu eins zu eins einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität. Darüber hinaus umfasst die HTML DOM API einige Schnittstellen und Typen, die die Schnittstellen der HTML-Elemente unterstützen.
Schnittstellen für HTML-Elemente
Diese Schnittstellen repräsentieren bestimmte HTML-Elemente oder Gruppen verwandter Elemente, denen dieselben Eigenschaften und Methoden zugeordnet sind.
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
Veraltete Schnittstellen für HTML-Elemente
Nicht mehr verwendete Schnittstellen für HTML-Elemente
Schnittstellen zur Integration von Webanwendungen und Browsern
Diese Schnittstellen ermöglichen den Zugriff auf das Browserfenster und das darin enthaltene HTML-Dokument sowie auf den Zustand des Browsers, gegebenenfalls verfügbare Plugins und verschiedene Konfigurationsoptionen.
Nicht mehr verwendete Schnittstellen zur Integration von Webanwendungen und Browsern
Schnittstellen zur Formularunterstützung
Diese Schnittstellen stellen die Struktur und Funktionalität bereit, die von Elementen zum Erstellen und Verwalten von Formularen benötigt werden, darunter die Elemente <form> und <input>.
Schnittstellen für Canvas und Bilder
Diese Schnittstellen repräsentieren Objekte, die von der Canvas API verwendet werden, sowie die Elemente <img> und <picture>.
Medienschnittstellen
Die Medienschnittstellen ermöglichen über HTML den Zugriff auf die Inhalte der Medienelemente <audio> und <video>.
Schnittstellen für Drag and Drop
Diese Schnittstellen werden von der HTML Drag and Drop API verwendet, um einzelne ziehbare oder gerade gezogene Objekte sowie Gruppen solcher Objekte zu repräsentieren und den Drag-and-Drop-Vorgang zu verarbeiten.
Schnittstellen für den Seitenverlauf
Die Schnittstellen der History API ermöglichen den Zugriff auf Informationen über den Browserverlauf sowie die Vorwärts- und Rückwärtsnavigation des aktuellen Browser-Tabs innerhalb dieses Verlaufs.
Schnittstellen für Web Components
Diese Schnittstellen werden von der Web Components API verwendet, um benutzerdefinierte Elemente zu erstellen und zu verwalten.
Verschiedene und unterstützende Schnittstellen
Diese unterstützenden Objekttypen werden in der HTML DOM API auf unterschiedliche Weise verwendet. Darüber hinaus repräsentiert PromiseRejectionEvent das Ereignis, das übermittelt wird, wenn ein JavaScript-Promise zurückgewiesen wird.
Schnittstellen, die zu anderen APIs gehören
Mehrere Schnittstellen sind zwar technisch in der HTML-Spezifikation definiert, gehören aber tatsächlich zu anderen APIs.
Schnittstellen für Web Storage
Die Web Storage API ermöglicht es Websites, Daten vorübergehend oder dauerhaft auf dem Gerät von Benutzern zu speichern, um sie später wiederzuverwenden.
Schnittstellen für Web Workers
Diese Schnittstellen werden von der Web Workers API verwendet. Sie ermöglichen Workern die Interaktion mit einer Anwendung und deren Inhalten und unterstützen außerdem den Nachrichtenaustausch zwischen Fenstern oder Anwendungen.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
Schnittstellen für WebSocket
Diese in der HTML-Spezifikation definierten Schnittstellen werden von der WebSockets API verwendet.
Schnittstellen für serverseitig gesendete Ereignisse
Die Schnittstelle EventSource repräsentiert die Quelle, die serverseitig gesendete Ereignisse gesendet hat oder sendet.
Beispiele
In diesem Beispiel wird das Ereignis input eines <input>-Elements überwacht. So wird der Zustand einer „Senden“-Schaltfläche abhängig davon aktualisiert, ob ein bestimmtes Feld gerade einen Wert enthält.
HTML
Das HTML sieht folgendermaßen aus:
<p>Please provide the information below. Items marked with "*" are required.</p>
<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="button" value="Send" id="sendButton" />
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;
}
});
Dieser Code verwendet die Methode getElementById() der Schnittstelle Document, um die DOM-Objekte abzurufen, die die <input>-Elemente mit den IDs userName und sendButton repräsentieren. Über diese Objekte können wir auf die Eigenschaften und Methoden zugreifen, die Informationen über die Elemente bereitstellen und ihre Steuerung ermöglichen.
Die Eigenschaft disabled des HTMLInputElement-Objekts für die „Senden“-Schaltfläche wird auf true gesetzt. Dadurch wird die Schaltfläche deaktiviert und kann nicht angeklickt werden. Außerdem wird das Eingabefeld für den Benutzernamen zum aktiven Fokus, indem die von HTMLElement geerbte Methode focus() aufgerufen wird.
Anschließend wird addEventListener() aufgerufen, um der Eingabe des Benutzernamens einen Handler für das Ereignis input hinzuzufügen. Der Code prüft die Länge des aktuellen Eingabewerts. Ist sie null, wird die „Senden“-Schaltfläche deaktiviert, sofern sie nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.
Damit ist die „Senden“-Schaltfläche immer dann aktiviert, wenn das Eingabefeld für den Benutzernamen einen Wert enthält, und deaktiviert, wenn es leer ist.
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # htmlelement |