The HTML DOM API
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die HTML DOM API besteht aus den Schnittstellen, die die Funktionalität jedes der Elemente in HTML definieren, sowie allen unterstützenden Typen und Schnittstellen, auf die sie angewiesen sind.
Die funktionalen Bereiche, die in der HTML DOM API enthalten sind, umfassen:
- Zugriff auf und Kontrolle 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 zum Zeichnen darauf. - Verwaltung von Medien, die mit den HTML-Medienelementen (
<audio>und<video>) verbunden sind. - Ziehen und Ablegen von Inhalten auf Webseiten.
- Zugriff auf die Browser-Navigation Historie.
- 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 umfassen. Diskussionen über andere Bereiche, wie Drag and Drop, WebSockets, Web Storage usw., finden Sie in der Dokumentation dieser 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 Knoten, wobei ein Knoten ein grundlegender Eintrag ist, der ein einzelnes Objekt innerhalb des Dokuments repräsentiert (wie ein Element oder ein Textknoten).
Knoten können rein organisatorisch sein und eine Möglichkeit bieten, andere Knoten zusammenzufassen oder einen Punkt zu bieten, an dem eine Hierarchie aufgebaut werden kann; andere Knoten können sichtbare Komponenten eines Dokuments darstellen. Jeder Knoten basiert auf der Node Schnittstelle, die Eigenschaften zum Abrufen von Informationen über den Knoten sowie Methoden zum Erstellen, Löschen und Organisieren von Knoten innerhalb des DOM bereitstellt.
Knoten haben kein Konzept über den Inhalt, der tatsächlich im Dokument angezeigt wird. Sie sind leere Gefäße. Das grundlegende Konzept eines Knotens, der visuelle Inhalte darstellen kann, wird durch die Element Schnittstelle eingeführt. Eine Element-Objektinstanz 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 verschachtelt hat:
Während die Document Schnittstelle als Teil der DOM-Spezifikation definiert ist, erweitert die HTML-Spezifikation diese erheblich, um Informationen hinzuzufügen, die spezifisch für die Verwendung des DOM im Kontext eines Webbrowsers sind, sowie zu dessen Verwendung zur spezifischen Darstellung von HTML-Dokumenten.
Zu den Dingen, die durch den HTML-Standard zu Document hinzugefügt wurden, gehören:
- Unterstützung für den Zugriff auf verschiedene Informationen, die von den HTTP-Headern beim Laden der Seite bereitgestellt werden, wie den Ort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, verweisende Website usw.
- Zugriff auf Listen von Elementen im
<head>-Block des Dokuments und dem body, sowie Listen der Bilder, Links, Skripte usw., die im Dokument enthalten sind. - Unterstützung für die Interaktion mit dem Benutzer durch Untersuchung von Fokus und durch das Ausführen von Befehlen auf bearbeitbaren Inhalten.
- Ereignishandler für Dokumentereignisse, die vom HTML-Standard definiert werden, um den Zugriff auf Maus und Tastatur Ereignisse zu ermöglichen, Drag and Drop, Mediensteuerung und mehr.
- Ereignishandler für Ereignisse, die sowohl an Elemente als auch an Dokumente geliefert werden können; derzeit umfassen diese nur
copy,cutundpaste-Aktionen.
HTML-Element-Schnittstellen
Die Element-Schnittstelle wurde weiter angepasst, um HTML-Elemente spezifisch darzustellen, indem die HTMLElement Schnittstelle eingeführt wurde, von der alle spezifischeren HTML-Elementklassen erben. Dies erweitert die Element-Klasse, um HTML-spezifische allgemeine Funktionen zu den Elemente-Knoten hinzuzufügen. Von HTMLElement hinzugefügte Eigenschaften sind 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 repräsentiert wird. Die HTMLElement-Klasse implementiert wiederum Node, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise sind die durch die Node Schnittstelle implementierten Strukturmerkmale auch für HTML-Elemente verfügbar, sodass sie ineinander verschachtelt, erstellt und gelöscht, verschoben usw. werden können.
Die HTMLElement-Schnittstelle ist jedoch generisch 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 Scroll-Position usw.
Um die Funktionalität der Kern-HTMLElement-Schnittstelle zu erweitern und die für ein bestimmtes Element erforderlichen Funktionen bereitzustellen, wird die HTMLElement-Klasse subclassed, um die benötigten Eigenschaften und Methoden hinzuzufügen. Beispielsweise wird das <canvas>-Element durch ein Objekt vom Typ HTMLCanvasElement dargestellt. HTMLCanvasElement ergänzt den HTMLElement-Typ, indem es Eigenschaften wie height und Methoden wie getContext() hinzufügt, um canvas-spezifische Funktionen bereitzustellen.
Die gesamte Vererbung für HTML-Elementklassen sieht so aus:
Daher erbt ein Element die Eigenschaften und Methoden all seiner Vorfahren. Zum Beispiel ein <a>-Element, das im DOM durch ein Objekt vom Typ HTMLAnchorElement dargestellt wird. Das Element umfasst dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, aber auch diejenigen, die durch HTMLElement und Element sowie durch Node und schließlich EventTarget definiert sind.
Jede Ebene definiert einen wesentlichen Aspekt der Nützlichkeit des Elements. Von Node erbt das Element Konzepte im Zusammenhang mit der Fähigkeit, dass das Element von einem anderen Element enthalten werden kann und selbst andere Elemente enthalten kann. Von besonderer Bedeutung ist das, was durch die Vererbung von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspielen und Anhalten von Ereignissen usw. zu empfangen und zu verarbeiten.
Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen zwischenvermittelnden Typ haben. Beispielsweise 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 usw. basiert. HTMLMediaElement definiert die gemeinsam genutzten Methoden und Eigenschaften zwischen Audio- und Videoelementen.
Diese elementspezifischen Schnittstellen bilden den Großteil der HTML DOM API und sind der Schwerpunkt dieses Artikels. Um mehr über die tatsächliche Struktur des DOM zu erfahren, siehe Einführung in das DOM.
Zielgruppe der HTML DOM
Die durch die HTML DOM bereitgestellten Funktionen gehören zu den am häufigsten verwendeten APIs im Werkzeugkasten eines Webentwicklers. Alle bis auf die einfachsten Webanwendungen werden einige Funktionen der HTML DOM nutzen.
HTML DOM API-Schnittstellen
Die meisten der Schnittstellen, die die HTML DOM API bilden, entsprechen fast 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 HTML-Element-Schnittstellen.
HTML-Element-Schnittstellen
Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Sätze verwandter Elemente, die dieselben Eigenschaften und Methoden aufweisen).
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
Veraltete HTML-Element-Schnittstellen
HTMLMarqueeElementVeraltet
Obsolete HTML-Element-Schnittstellen
HTMLFontElementVeraltetHTMLFrameElementVeraltetHTMLFrameSetElementVeraltet
Schnittstellen für Web-App- und Browser-Integration
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.
Veraltete Schnittstellen für Web-App- und Browser-Integration
ExternalVeraltet
Obsolete Schnittstellen für Web-App- und Browser-Integration
PluginVeraltetPluginArrayVeraltet
Formularunterstützung Schnittstellen
Schnittstellen für Canvas und Bild
Media-Schnittstellen
Schnittstellen für Drag and Drop
Diese Schnittstellen werden von der HTML Drag and Drop API verwendet, um einzelne ziehbare (oder gezogene) Elemente, Gruppen von gezogenen oder ziehbaren Elementen darzustellen und den Zieh- und Ablegeprozess zu verwalten.
Schnittstellen für die Seitenhistorie
Die History API-Schnittstellen ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers sowie das Verschieben des aktuell geöffneten Tabs des Browsers vorwärts und rückwärts in diesem Verlauf.
Schnittstellen für Web Components
Diese Schnittstellen werden von der Web Components API verwendet, um die verfügbaren benutzerdefinierten Elemente zu erstellen und zu verwalten.
Verschiedene und unterstützende Schnittstellen
Diese unterstützenden Objekttypen werden auf verschiedene Weise in der HTML DOM API verwendet. Zusätzlich repräsentiert PromiseRejectionEvent das Ereignis, das eintritt, wenn ein JavaScript Promise abgelehnt wird.
Zu anderen APIs gehörende Schnittstellen
Einige Schnittstellen werden technisch gesehen in der HTML-Spezifikation definiert, sind aber tatsächlich Teil anderer APIs.
Web-Speicher-Schnittstellen
Die Web Storage API bietet die Möglichkeit, dass Websites Daten entweder vorübergehend oder dauerhaft auf dem Gerät des Benutzers für eine spätere Wiederverwendung speichern.
Web Workers Schnittstellen
Diese Schnittstellen werden von der Web Workers API sowohl zur Einrichtung der Möglichkeit, dass Worker mit einer App und deren Inhalt interagieren, als auch zur Unterstützung der Nachrichtenübermittlung zwischen Fenstern oder Apps verwendet.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
WebSocket-Schnittstellen
Diese Schnittstellen, die in der HTML-Spezifikation definiert sind, werden von der WebSockets API verwendet.
Schnittstellen für Server-sent events
Die EventSource Schnittstelle repräsentiert die Quelle, die serverseitige Ereignisse gesendet hat oder sendet.
Beispiele
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 und deren getElementById()-Methode, um das DOM-Objekt zu erhalten, das die <input>-Elemente mit den IDs userName und sendButton repräsentiert. Mit diesen können wir auf die Eigenschaften und Methoden zugreifen, die Informationen über und Kontrolle über diese Elemente bereitstellen.
Das HTMLInputElement-Objekt für die "Senden"-Taste hat die disabled-Eigenschaft auf true gesetzt, wodurch die "Senden"-Taste deaktiviert wird, sodass sie nicht angeklickt werden kann. Zusätzlich wird das Eingabefeld für den Benutzernamen durch Aufruf der focus()-Methode, die es von HTMLElement erbt, zum aktiven Fokus gemacht.
Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis zum Benutzernamneneingabefeld hinzuzufügen. Dieser Code betrachtet die Länge des aktuellen Werts der Eingabe; wenn er null ist, wird die "Senden"-Taste deaktiviert, wenn sie nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass die Taste aktiviert ist.
Mit dieser Konfiguration ist die "Senden"-Taste immer aktiviert, wenn das Benutzernamneneingabefeld einen Wert hat, und deaktiviert, wenn es leer ist.
HTML
Der HTML-Code für das Formular sieht so 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
| Specification |
|---|
| HTML # htmlelement |