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 einzelnen 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 HTML-Elemente und deren Steuerung über das DOM.
- Zugriff auf und Manipulation von Formulardaten.
- Interaktion mit dem Inhalt von 2D-Bildern und dem Kontext eines HTML-
<canvas>
, 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 Verlaufsverlauf des Browsers.
- 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 -Nutzung
In diesem Artikel konzentrieren wir uns auf die Teile des HTML-DOM, die die Interaktion mit HTML-Elementen betreffen. Diskussionen über andere Bereiche, wie Ziehen und Ablegen, WebSockets, Web Storage usw., 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 Knoten, wobei ein Knoten einen grundlegenden Datensatz darstellt, der ein einzelnes Objekt innerhalb des Dokuments (wie ein Element oder ein Textknoten) repräsentiert.
Knoten können rein organisatorisch sein, indem sie eine Möglichkeit zum Gruppieren anderer Knoten oder einen Punkt bieten, an dem eine Hierarchie erstellt 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, das tatsächlich im Dokument angezeigte Inhalte einzuschließen. Sie sind leere Gefäße. Die grundlegende Vorstellung 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 enthält:
Während die Document
-Schnittstelle als Teil der DOM-Spezifikation definiert ist, erweitert die HTML-Spezifikation sie erheblich, um Informationen hinzuzufügen, die spezifisch für die Verwendung des DOM im Kontext eines Webbrowsers sind, sowie um HTML-Dokumente speziell darzustellen.
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 der Standort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, verweisende Seite und so weiter.
- Zugriff auf Listen von Elementen im
<head>
-Block des Dokuments und body, sowie auf Listen der im Dokument enthaltenen Bilder, Links, Skripte usw. - Unterstützung für die Interaktion mit dem Benutzer durch Überprüfung des Fokus und Ausführung von Befehlen auf bearbeitbaren Inhalten.
- Ereignis-Handler für vom HTML-Standard definierte Dokumentereignisse, die Zugang zu Maus und Tastatur Ereignissen, Ziehen und Ablegen, Mediensteuerung und mehr erlauben.
- Ereignis-Handler für Ereignisse, die sowohl an Elemente als auch an Dokumente geliefert werden können; dazu zählen derzeit nur Kopieren, Ausschneiden und Einfügen-Aktionen.
HTML-Element-Schnittstellen
Die Element
-Schnittstelle wurde spezifisch angepasst, um HTML-Elemente darzustellen, indem die HTMLElement
-Schnittstelle eingeführt wurde, von der alle spezifischeren HTML-Elementklassen erben. Dies erweitert die Element
-Klasse, um HTML-spezifische allgemeine Merkmale zu den Element-Knoten 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, dargestellt durch die HTMLElement
-Schnittstelle. Die HTMLElement
-Klasse implementiert wiederum Node
, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise stehen die strukturellen Merkmale, die durch die Node
-Schnittstelle implementiert werden, auch den HTML-Elementen zur Verfügung, sodass sie ineinander geschachtelt, erstellt und gelöscht, hin und her bewegt werden können und so weiter.
Die HTMLElement
-Schnittstelle ist jedoch generisch und bietet nur die Funktionalität, die allen HTML-Elementen gemeinsam ist, wie die ID des Elements, dessen Koordinaten, das HTML, das das Element bildet, Informationen über die Scrollposition usw.
Um die Funktionalität der Kern-HTMLElement
-Schnittstelle zu erweitern, um die Funktionen bereitzustellen, die für ein bestimmtes Element erforderlich sind, wird die HTMLElement
-Klasse unterklassifiziert, um die erforderlichen Eigenschaften und Methoden hinzuzufügen. Zum Beispiel wird das <canvas>
-Element durch ein Objekt vom Typ HTMLCanvasElement
dargestellt. HTMLCanvasElement
erweitert den HTMLElement
-Typ, indem es Eigenschaften wie height
hinzufügt und Methoden wie getContext()
bereitstellt, um Canvas-spezifische Funktionen zu bieten.
Die gesamte Vererbung für HTML-Elementklassen sieht so aus:
Ein Element erbt somit die Eigenschaften und Methoden all seiner Vorfahren. Betrachten wir ein <a>
-Element, das im DOM durch ein Objekt des Typs HTMLAnchorElement
dargestellt wird. Das Element schließt also die spezifischen Anker-Eigenschaften und -Methoden ein, die in der Dokumentation dieser Klasse beschrieben sind, aber auch die, die von HTMLElement
und Element
sowie von Node
und letztlich EventTarget
definiert sind.
Jede Ebene definiert einen wesentlichen Aspekt des Nutzens des Elements. Von Node
erbt das Element Konzepte, die die Fähigkeit betreffen, dass das Element von einem anderen Element enthalten werden kann und selbst andere Elemente enthalten kann. Besonders wichtig ist, was durch die Vererbung von EventTarget
gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspiel- und Pausierereignisse und so weiter zu empfangen und zu verarbeiten.
Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen Zwischenstyp haben. Zum Beispiel präsentieren die <audio>
- und <video>
-Elemente beide audiovisuelle Medien. 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 machen den Großteil der HTML-DOM-API aus 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-API
Die von der HTML-DOM-API bereitgestellten Funktionen gehören zu den am häufigsten genutzten APIs im Werkzeugkasten eines Webentwicklers. Alle, außer den einfachsten Webanwendungen, nutzen einige Funktionen der HTML-DOM-API.
HTML-DOM-API-Schnittstellen
Der Großteil der Schnittstellen, aus denen die HTML-DOM-API besteht, bildet fast eins zu eins die einzelnen HTML-Elemente oder eine kleine Gruppe von Elementen mit ähnlicher Funktionalität ab. Darüber hinaus umfasst die HTML-DOM-API einige Schnittstellen und Typen, die die HTML-Element-Schnittstellen unterstützen.
HTML-Element-Schnittstellen
Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Sätze verwandter Elemente, die dieselben Eigenschaften und Methoden besitzen).
HTMLAnchorElement
HTMLAreaElement
HTMLAudioElement
HTMLBaseElement
HTMLBodyElement
HTMLBRElement
HTMLButtonElement
HTMLCanvasElement
HTMLDataElement
HTMLDataListElement
HTMLDetailsElement
HTMLDialogElement
HTMLDirectoryElement
HTMLDivElement
HTMLDListElement
HTMLElement
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLLabelElement
HTMLLegendElement
HTMLLIElement
HTMLLinkElement
HTMLMapElement
HTMLMediaElement
HTMLMenuElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLObjectElement
HTMLOListElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOutputElement
HTMLParagraphElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLSlotElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableElement
HTMLTableRowElement
HTMLTableSectionElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLVideoElement
Veraltete HTML-Element-Schnittstellen
HTMLMarqueeElement
Veraltet
Überholte HTML-Element-Schnittstellen
HTMLFontElement
VeraltetHTMLFrameElement
VeraltetHTMLFrameSetElement
Veraltet
Webanwendungen 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.
Veraltete Webanwendungen und Browser-Integrationsschnittstellen
External
Veraltet
Überholte Webanwendungen und Browser-Integrationsschnittstellen
Plugin
VeraltetPluginArray
Veraltet
Formulare Unterstützungsschnittstellen
Canvas- und Bildschnittstellen
Multimedia-Schnittstellen
Ziehen-und-Ablegen-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 Ziehen-und-Ablegen-Prozess zu handeln.
Verlaufsschnittstellen
Die Verlaufsschnittstellen des Verlaufs-API lassen Sie auf Informationen über den Verlauf des Browsers zugreifen und ermöglichen Ihnen, den aktuellen Tab des Browsers vorwärts und rückwärts durch diesen Verlauf zu schieben.
Web Components-Schnittstellen
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. Darüber hinaus repräsentiert PromiseRejectionEvent
das Ereignis, das geliefert wird, wenn ein JavaScript-Promise
abgelehnt wird.
Schnittstellen, die zu anderen APIs gehören
Einige Schnittstellen sind technisch in der HTML-Spezifikation definiert, gehören jedoch tatsächlich zu anderen APIs.
Web-Speicher-Schnittstellen
Die Web Storage API bietet die Möglichkeit, Daten entweder vorübergehend oder dauerhaft auf dem Gerät des Benutzers zur späteren Wiederverwendung zu speichern.
Web Workers-Schnittstellen
Diese Schnittstellen werden von der Web Workers API verwendet, um sowohl die Fähigkeit für Worker zu etablieren, mit einer App und ihrem Inhalt zu interagieren, als auch um das Messaging zwischen Fenstern oder Apps zu unterstützen.
BroadcastChannel
DedicatedWorkerGlobalScope
MessageChannel
MessageEvent
MessagePort
SharedWorker
SharedWorkerGlobalScope
Worker
WorkerGlobalScope
WorkerLocation
WorkerNavigator
WebSocket-Schnittstellen
Diese Schnittstellen, die von der HTML-Spezifikation definiert werden, werden von der WebSockets API verwendet.
Server-gesendete Ereignis-Schnittstellen
Die EventSource
-Schnittstelle repräsentiert die Quelle, die Server-gesendete 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 Methode getElementById()
der Document
-Schnittstelle, 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 bereitstellen und die Kontrolle über diese Elemente gewähren.
Das HTMLInputElement
-Objekt für die Eigenschaft disabled
der "Senden"-Schaltfläche wird auf true
gesetzt, wodurch die "Senden"-Schaltfläche deaktiviert wird, sodass sie nicht angeklickt werden kann. Darüber hinaus wird das Benutzername-Eingabefeld durch Aufrufen der focus()
-Methode aktiv in den Fokus genommen, die es von der HTMLElement
-Schnittstelle erbt.
Anschließend wird addEventListener()
aufgerufen, um einen Handler für das input
-Ereignis zur Benutzernameneingabe hinzuzufügen. Dieser Code betrachtet die Länge des aktuellen Wertes der Eingabe; wenn sie null ist, wird die "Senden"-Schaltfläche deaktiviert, falls sie nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.
Mit dieser Installation ist die "Senden"-Schaltfläche immer aktiviert, wenn 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
Specification |
---|
HTML # htmlelement |