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:

Struktur eines Dokuments mit Elementen in einem Dokument in einem Fenster

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:

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:

Hierarchie der Schnittstellen für HTML-Elemente

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).

Veraltete HTML-Element-Schnittstellen

Überholte HTML-Element-Schnittstellen

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

Überholte Webanwendungen und Browser-Integrationsschnittstellen

Formulare Unterstützungsschnittstellen

Diese Schnittstellen bieten die Struktur und Funktionalität, die für die Erstellung und Verwaltung von Formularen erforderlich sind, einschließlich der <form>- und <input>-Elemente.

Canvas- und Bildschnittstellen

Diese Schnittstellen repräsentieren Objekte, die von der Canvas-API sowie dem <img>-Element und <picture>-Elementen verwendet werden.

Multimedia-Schnittstellen

Die Multimedia-Schnittstellen bieten HTML-Zugang zu den Inhalten der Multimedia-Elemente: <audio> und <video>.

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.

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

In diesem Beispiel wird das input-Ereignis eines <input>-Elements überwacht, um den Status der „Senden“-Schaltfläche eines Formulars basierend darauf zu aktualisieren, ob ein bestimmtes Feld momentan einen Wert hat.

JavaScript

js
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:

html
<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

Browser-Kompatibilität

Siehe auch

Referenzen

Leitfäden