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 jedes Elements in HTML definieren, sowie aus unterstützenden Typen und Schnittstellen, auf die sie angewiesen sind.
Die Funktionsbereiche, die in der HTML-DOM-API enthalten sind, umfassen:
- Zugriff auf und Steuerung von HTML-Elementen über das DOM.
- Zugriff auf und Manipulation von Formulardaten.
- Interaktion mit den Inhalten von 2D-Bildern und dem Kontext eines HTML-
<canvas>, zum Beispiel, 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 Browser-Navigation-Verlauf.
- Unterstützende und verbindende Schnittstellen für andere APIs wie Web Components, Web Storage, Web Workers, WebSocket und Server-sent Events.
HTML-DOM-Konzepte und -Verwendung
In diesem Artikel konzentrieren wir uns auf die Teile des HTML-DOM, die die Interaktion mit HTML-Elementen beinhalten. Diskussionen über andere Bereiche, wie Drag and Drop, WebSockets, Web Storage, etc. finden Sie in der Dokumentation zu diesen APIs.
Struktur eines HTML-Dokuments
Das Document Object Model (DOM) ist eine Architektur, die die Struktur eines Dokuments beschreibt; jedes Dokument wird durch eine Instanz der Schnittstelle Document dargestellt. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Nodes, wobei ein Node einen grundlegenden Eintrag darstellt, der ein einzelnes Objekt im Dokument repräsentiert (wie ein Element oder einen Textknoten).
Nodes können rein organisatorisch sein und eine Möglichkeit bieten, andere Nodes zu gruppieren oder einen Punkt zu schaffen, an dem eine Hierarchie erstellt werden kann; andere Nodes können sichtbare Komponenten eines Dokuments repräsentieren. Jeder Node basiert auf der Node-Schnittstelle, die Eigenschaften zum Abrufen von Informationen über den Node sowie Methoden zum Erstellen, Löschen und Organisieren von Nodes innerhalb des DOM bereitstellt.
Nodes haben kein Konzept, den tatsächlich im Dokument angezeigten Inhalt einzuschließen. Sie sind leere Gefäße. Die grundlegende Vorstellung eines Knoten, der visuellen Inhalt darstellen kann, wird durch die Element-Schnittstelle eingeführt. Eine Instanz von Element repräsentiert ein einzelnes Element in einem Dokument, das entweder mit HTML oder einem XML-Vokabular wie SVG erstellt wurde.
Betrachten Sie zum Beispiel ein Dokument mit zwei Elementen, von denen eines zwei weitere Elemente in sich geschachtelt hat:
Während die Document-Schnittstelle als Teil der DOM-Spezifikation definiert ist, verbessert die HTML-Spezifikation sie erheblich, um Informationen hinzuzufügen, die speziell für die Verwendung des DOM im Kontext eines Webbrowsers sowie zur Darstellung von HTML-Dokumenten relevant sind.
Zu den Dingen, die durch den HTML-Standard zu Document hinzugefügt werden, gehören:
- Unterstützung für den Zugriff auf verschiedene Informationen, die von den HTTP-Headern bereitgestellt werden, wenn die Seite geladen wird, wie z.B. der Standort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, verweisende Seite usw.
- Zugriff auf Listen von Elementen im
<head>-Block und im body des Dokuments, sowie Listen der im Dokument enthaltenen Bilder, Links, Skripte usw. - Unterstützung bei der Interaktion mit dem Benutzer durch die Untersuchung des Fokus und durch Ausführen von Befehlen für bearbeitbare Inhalte.
- Ereignis-Handler für Dokumentereignisse, die vom HTML-Standard definiert sind, um Zugriff auf Maus- und Tastatur-Ereignisse, Drag and Drop, Mediensteuerung und mehr zu ermöglichen.
- Ereignis-Handler für Ereignisse, die sowohl an Elemente als auch an Dokumente geliefert werden können; diese umfassen derzeit nur die Aktionen
copy,cutundpaste.
HTML-Element-Schnittstellen
Die Element-Schnittstelle wurde weiter angepasst, um HTML-Elemente speziell darzustellen, indem die HTMLElement-Schnittstelle eingeführt wurde, die von allen spezifischeren HTML-Elementklassen geerbt wird. Dies erweitert die Element-Klasse, um HTML-spezifische allgemeine Features zu den Elementknoten hinzuzufügen. Zu den von HTMLElement hinzugefügten Eigenschaften gehören beispielsweise hidden und innerText.
Ein HTML-Dokument ist ein DOM-Baum, in dem jeder der Knoten ein HTML-Element ist, das durch die HTMLElement-Schnittstelle dargestellt wird. Die HTMLElement-Klasse implementiert wiederum Node, sodass jedes Element auch ein Node ist (aber nicht umgekehrt). Auf diese Weise stehen die strukturellen Features, die von der Node-Schnittstelle implementiert werden, auch HTML-Elementen zur Verfügung, sodass sie ineinander verschachtelt, erstellt und gelöscht, verschoben und so weiter werden können.
Die HTMLElement-Schnittstelle ist jedoch allgemein und bietet nur die Funktionalität, die allen HTML-Elementen gemeinsam ist, wie die ID des Elements, seine Koordinaten, das HTML, das das Element bildet, Informationen über die Scrollposition und so weiter.
Um die Funktionalität der Kernschnittstelle HTMLElement zu erweitern und die für ein spezifisches Element benötigten Features bereitzustellen, wird die HTMLElement-Klasse erweitert, um die erforderlichen Eigenschaften und Methoden hinzuzufügen. Zum Beispiel wird das <canvas>-Element durch ein Objekt vom Typ HTMLCanvasElement repräsentiert. HTMLCanvasElement ergänzt den HTMLElement-Typ, indem es Eigenschaften wie height und Methoden wie getContext() hinzufügt, um Canvas-spezifische Features bereitzustellen.
Die allgemeine Vererbung für HTML-Elementklassen sieht so aus:
Auf diese Weise erbt ein Element die Eigenschaften und Methoden aller seiner Vorfahren. Betrachten Sie zum Beispiel ein <a>-Element, das im DOM durch ein Objekt des Typs HTMLAnchorElement dargestellt wird. Das Element umfasst dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, sowie die, die von HTMLElement und Element definiert sind, sowie von Node und schließlich EventTarget.
Jede Ebene definiert einen Schlüsselaspekt der Nützlichkeit des Elements. Von Node erbt das Element Konzepte, die die Fähigkeit betreffen, dass das Element von einem anderen Element enthalten und selber andere Elemente enthalten kann. Besonders wichtig ist das, was durch das Erben von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspiel- und Pause-Ereignisse und so weiter zu empfangen und zu behandeln.
Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen Zwischentyp haben. Zum Beispiel stellen die <audio>- und <video>-Elemente beide audiovisuelle Medien dar. Die entsprechenden Typen, HTMLAudioElement und HTMLVideoElement, basieren beide auf dem gemeinsamen Typ HTMLMediaElement, der wiederum auf HTMLElement basiert und so weiter. HTMLMediaElement definiert die Methoden und Eigenschaften, die zwischen Audio- und Videoelementen gemeinsam sind.
Diese elementspezifischen Schnittstellen bilden den Großteil der HTML-DOM-API und stehen im Mittelpunkt dieses Artikels. Der Artikel über das DOM bietet eine allgemeine Einführung in das DOM und seine Konzepte.
Zielgruppe der HTML-DOM
Die von der HTML-DOM offengelegten Funktionen gehören zu den am häufigsten genutzten APIs im Werkzeugkasten eines Webentwicklers. Alle, bis auf die einfachsten Webanwendungen, werden einige der HTML-DOM-Funktionen nutzen.
HTML-DOM-API-Schnittstellen
Die Mehrheit der Schnittstellen, die die HTML-DOM-API ausmachen, stimmen fast eins zu eins mit einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität überein. Zusätzlich umfasst die HTML-DOM-API einige Schnittstellen und Typen zur Unterstützung der HTML-Element-Schnittstellen.
HTML-Element-Schnittstellen
Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Sätze verwandter Elemente, die die gleichen Eigenschaften und Methoden teilen).
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
Veraltete HTML-Element-Schnittstellen
Obsolete HTML-Element-Schnittstellen
Web-App- und Browser-Integrationsschnittstellen
Diese Schnittstellen bieten Zugriff auf das Browserfenster und das Dokument, das das HTML enthält, sowie auf den Status des Browsers, verfügbare Plugins (falls vorhanden) und verschiedene Konfigurationsoptionen.
Obsolete Web-App- und Browser-Integrationsschnittstellen
Formularunterstützungs-Schnittstellen
Diese Schnittstellen stellen die Struktur und Funktionalität bereit, die von den Elementen benötigt wird, um Formulare zu erstellen und zu verwalten, einschließlich der <form>- und <input>-Elemente.
Canvas- und Bild-Schnittstellen
Diese Schnittstellen repräsentieren Objekte, die von der Canvas-API sowie vom <img>-Element und <picture>-Elementen verwendet werden.
Medien-Schnittstellen
Die Medienschnittstellen bieten HTML-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) Objekte, Gruppen von gezogenen oder ziehbaren Objekten zu repräsentieren und um den Drag and Drop-Prozess zu handhaben.
Seitenverlauf-Schnittstellen
Die Schnittstellen der History API ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers sowie das Vorwärts- und Rückwärtsnavigieren des aktuellen Tabs im Verlauf.
Web Components-Schnittstellen
Diese Schnittstellen werden von der Web Components API verwendet, um die verfügbaren benutzerdefinierten Elemente zu erstellen und zu verwalten.
Sonstige und unterstützende Schnittstellen
Diese unterstützenden Objekttypen werden in verschiedenen Weisen in der HTML-DOM-API verwendet. Zusätzlich repräsentiert PromiseRejectionEvent das Ereignis, das ausgeliefert wird, wenn ein JavaScript Promise abgelehnt wird.
Schnittstellen von anderen APIs
Mehrere Schnittstellen sind technisch in der HTML-Spezifikation definiert, während sie tatsächlich Teil anderer APIs sind.
Web Storage Schnittstellen
Die Web Storage API bietet die Möglichkeit für Websites, Daten entweder temporär oder dauerhaft auf dem Gerät des Benutzers für eine spätere Wiederverwendung zu speichern.
Web Workers Schnittstellen
Diese Schnittstellen werden von der Web Workers API sowohl verwendet, um die Fähigkeit zu schaffen, dass Arbeiter mit einer App und ihren Inhalten interagieren können, als auch um die Nachrichtenübermittlung zwischen Fenstern oder Apps zu unterstützen.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
WebSocket Schnittstellen
Diese Schnittstellen, die von der HTML-Spezifikation definiert sind, werden von der WebSockets API verwendet.
Server-sent Events Schnittstellen
Die EventSource-Schnittstelle repräsentiert die Quelle, die Server-sent Events gesendet hat oder sendet.
Beispiele
In diesem Beispiel wird das input-Ereignis eines <input>-Elements überwacht, um den Zustand der "Senden"-Schaltfläche eines Formulars basierend darauf zu aktualisieren, ob ein bestimmtes Feld derzeit einen Wert hat oder nicht.
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 Document-Schnittstelle's getElementById()-Methode, um das DOM-Objekt zu erhalten, das die <input>-Elemente repräsentiert, deren IDs userName und sendButton sind. Mit diesen können wir auf die Eigenschaften und Methoden zugreifen, die Informationen über diese Elemente bereitstellen und Kontrolle über sie gewähren.
Das HTMLInputElement-Objekt für die "Senden"-Schaltfläche besitzt die disabled-Eigenschaft, die auf true gesetzt wird, was die "Senden"-Schaltfläche deaktiviert, so dass sie nicht angeklickt werden kann. Darüber hinaus wird das Benutzername-Eingabefeld durch Aufruf der focus()-Methode, die es von HTMLElement erbt, in den aktiven Fokus genommen.
Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis zur Benutzernamen-Eingabe hinzuzufügen. Dieser Code überprüft die Länge des aktuellen Werts der Eingabe; wenn sie null ist, wird die "Senden" Schaltfläche deaktiviert, falls sie noch nicht deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.
Mit diesem Mechanismus im Platz wird die "Senden" Schaltfläche immer aktiviert, wann immer das Benutzername-Eingabefeld einen Wert hat, und deaktiviert, wenn es leer ist.
HTML
Das HTML für das Formular sieht folgendermaßen aus:
<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>
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # htmlelement |