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 besteht aus den Schnittstellen, die die Funktionalität der einzelnen Elemente in HTML definieren, sowie aus den unterstützenden Typen und Schnittstellen, auf die sie angewiesen sind.
Die HTML-DOM-API umfasst folgende Funktionsbereiche:
- Zugriff auf und Steuerung von HTML-Elementen über das DOM.
- Zugriff auf und Bearbeitung von Formulardaten.
- Interaktion mit dem Inhalt 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>) verbunden 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
Dieser Artikel konzentriert sich 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 dabei ein grundlegender Datensatz, der ein einzelnes Objekt innerhalb des Dokuments repräsentiert, beispielsweise ein Element oder einen Textknoten.
Knoten können ausschließlich der Organisation dienen, indem sie andere Knoten gruppieren oder einen Ausgangspunkt für eine Hierarchie bilden. Andere Knoten können sichtbare Bestandteile eines Dokuments repräsentieren. Jeder Knoten basiert auf der Schnittstelle Node, die Eigenschaften zum Abrufen von Informationen über den Knoten sowie Methoden zum Erstellen, Löschen und Anordnen von Knoten innerhalb des DOM bereitstellt.
Knoten selbst enthalten konzeptionell nicht den Inhalt, der tatsächlich im Dokument angezeigt wird. Sie sind leere Behälter. Das grundlegende Konzept eines Knotens, der sichtbare Inhalte 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, ineinander verschachtelte Elemente enthält:
Die Schnittstelle Document ist zwar als Teil der DOM-Spezifikation definiert, wird durch die HTML-Spezifikation jedoch erheblich erweitert. Dadurch kommen Informationen hinzu, die speziell für die Verwendung des DOM im Kontext eines Webbrowsers sowie für die Repräsentation von HTML-Dokumenten benötigt werden.
Zu den Ergänzungen des HTML-Standards für Document gehören:
- Unterstützung beim Zugriff auf Informationen aus den HTTP-Headern, die beim Laden der Seite bereitgestellt werden, etwa den Speicherort, 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 und Skripte. - Unterstützung bei der Interaktion mit Benutzern durch das Prüfen des Fokus und das Ausführen von Befehlen für bearbeitbare Inhalte.
- Event-Handler für Dokumentereignisse, die durch den HTML-Standard definiert sind und den Zugriff auf Maus- und Tastaturereignisse, Drag and Drop, die Mediensteuerung und mehr 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 die Einführung der Schnittstelle HTMLElement, von der alle spezifischeren Klassen für HTML-Elemente erben, weiter an die Repräsentation 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 implementiert wiederum Node. Somit ist jedes Element auch ein Knoten, aber nicht jeder Knoten ein Element. Auf diese Weise stehen die von der Schnittstelle Node bereitgestellten strukturellen Funktionen auch HTML-Elementen zur Verfügung. So können Elemente 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, etwa die ID und die Koordinaten des Elements, das HTML, aus dem das Element besteht, und Informationen zur Scrollposition.
Um die grundlegende Schnittstelle HTMLElement um die für ein bestimmtes Element benötigten Funktionen zu erweitern, wird von der Klasse HTMLElement eine Unterklasse mit den erforderlichen Eigenschaften und Methoden abgeleitet. 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 Klassen für HTML-Elemente 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 in der Dokumentation dieser Klasse beschriebenen spezifischen Eigenschaften und Methoden sowie über die Eigenschaften und Methoden von HTMLElement, Element, Node und schließlich EventTarget.
Jede Ebene trägt einen wesentlichen Aspekt 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 Vererbung von EventTarget: Sie ermöglicht es, Ereignisse wie Mausklicks sowie Wiedergabe- und Pausierungsereignisse zu empfangen und zu verarbeiten.
Manche Elemente haben Gemeinsamkeiten und besitzen deshalb einen zusätzlichen gemeinsamen Zwischentyp. Die Elemente <audio> und <video> stellen beispielsweise audiovisuelle Medien dar. Die entsprechenden Typen HTMLAudioElement und HTMLVideoElement basieren beide 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. Fast alle Webanwendungen, mit Ausnahme der einfachsten, nutzen 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 zur Unterstützung der Schnittstellen für HTML-Elemente.
Schnittstellen für HTML-Elemente
Diese Schnittstellen repräsentieren bestimmte HTML-Elemente oder Gruppen verwandter Elemente mit denselben Eigenschaften und Methoden.
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 Dokument, die das HTML enthalten, sowie auf den Zustand des Browsers, verfügbare Plugins (sofern vorhanden) und verschiedene Konfigurationsoptionen.
Nicht mehr verwendete Schnittstellen zur Integration von Webanwendungen und Browsern
Schnittstellen zur Unterstützung von Formularen
Diese Schnittstellen stellen die Struktur und Funktionalität bereit, die für die Erstellung und Verwaltung von Formularen mit Elementen wie <form> und <input> erforderlich sind.
Schnittstellen für Canvas und Bilder
Diese Schnittstellen repräsentieren Objekte, die von der Canvas-API sowie von den Elementen <img> und <picture> verwendet werden.
Medienschnittstellen
Die Medienschnittstellen ermöglichen über HTML den Zugriff auf die Inhalte der Medienelemente <audio> und <video>.
Drag-and-Drop-Schnittstellen
Diese Schnittstellen werden von der HTML Drag and Drop API verwendet, um einzelne ziehbare oder gezogene Elemente und Gruppen solcher Elemente zu repräsentieren sowie den Drag-and-Drop-Vorgang zu verarbeiten.
Schnittstellen für den Seitenverlauf
Mit den Schnittstellen der History API können Sie auf Informationen zum Browserverlauf zugreifen und den aktuellen Browser-Tab im Verlauf vor- und zurückbewegen.
Schnittstellen für Web Components
Diese Schnittstellen werden von der Web Components API verwendet, um benutzerdefinierte Elemente zu erstellen und zu verwalten.
Sonstige und unterstützende Schnittstellen
Diese unterstützenden Objekttypen werden in der HTML-DOM-API auf verschiedene Weise verwendet. Darüber hinaus repräsentiert PromiseRejectionEvent das Ereignis, das bei der Ablehnung eines JavaScript-Promise ausgelöst wird.
Schnittstellen anderer APIs
Mehrere Schnittstellen sind technisch gesehen in der HTML-Spezifikation definiert, gehören tatsächlich aber zu anderen APIs.
Schnittstellen für Web Storage
Die Web Storage API ermöglicht es Websites, Daten zur späteren Wiederverwendung vorübergehend oder dauerhaft auf dem Gerät der Benutzer zu speichern.
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 den Nachrichtenaustausch zwischen Fenstern oder Anwendungen.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
WebSocket-Schnittstellen
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 Schaltfläche „Senden“ abhängig davon aktualisiert, ob das Eingabefeld derzeit einen Wert enthält.
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 Eigenschaften und Methoden zugreifen, die Informationen über die Elemente bereitstellen und deren Steuerung ermöglichen.
Die Eigenschaft disabled des HTMLInputElement-Objekts für die Schaltfläche „Senden“ wird auf true gesetzt. Dadurch wird die Schaltfläche deaktiviert und kann nicht angeklickt werden. Außerdem erhält das Eingabefeld für den Benutzernamen den aktiven Fokus, indem die von HTMLElement geerbte Methode focus() aufgerufen wird.
Anschließend wird addEventListener() aufgerufen, um dem Eingabefeld für den Benutzernamen einen Handler für das Ereignis input hinzuzufügen. Der Code prüft die Länge des aktuellen Eingabewerts. Ist sie null, wird die Schaltfläche „Senden“ deaktiviert, sofern sie nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.
Damit ist die Schaltfläche „Senden“ immer dann aktiviert, wenn das Eingabefeld für den Benutzernamen einen Wert enthält, und deaktiviert, wenn es leer ist.
HTML
Das HTML sieht so 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" />
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # htmlelement |