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 der HTML-DOM-API 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>, um beispielsweise 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 Verlauf der Browsernavigation.
  • Unterstützung 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 das Arbeiten mit HTML-Elementen betreffen. Diskussionen über andere Bereiche, wie Drag and Drop, 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 repräsentiert (wie ein Element oder einen Textknoten).

Knoten können rein organisatorisch sein und eine Möglichkeit bieten, andere Knoten zu gruppieren oder einen Punkt zu bieten, an dem eine Hierarchie erstellt werden kann; andere Knoten können sichtbare Komponenten eines Dokuments darstellen. Jeder Knoten basiert auf der Schnittstelle Node, 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 von dem Inhalt, der tatsächlich im Dokument angezeigt wird. Sie sind leere Behälter. Die grundlegende Vorstellung eines Knotens, der visuelle Inhalte darstellen kann, wird durch die Schnittstelle Element eingeführt. Eine Element-Objektinstanz repräsentiert ein einzelnes Element in einem Dokument, das entweder mit HTML oder einer XML-Vokabular wie SVG erstellt wurde.

Betrachten Sie beispielsweise ein Dokument mit zwei Elementen, von denen eines zwei weitere Elemente in sich verschachtelt hat:

Struktur eines Dokuments mit Elementen innerhalb eines Dokuments in einem Fenster

Während die Schnittstelle Document als Teil der DOM-Spezifikation definiert ist, erweitert die HTML-Spezifikation sie erheblich, um Informationen speziell für die Verwendung des DOM im Kontext eines Webbrowsers hinzuzufügen, sowie für die Verwendung zur Darstellung von HTML-Dokumenten.

Zu den von der HTML-Norm zu Document hinzugefügten Dingen gehören:

HTML-Element-Schnittstellen

Die Element-Schnittstelle wurde weiter angepasst, um speziell HTML-Elemente zu repräsentieren, indem die Schnittstelle HTMLElement eingeführt wurde, von der alle spezifischeren HTML-Elementklassen erben. Dies erweitert die Element-Klasse, um HTML-spezifische Allgemeinmerkmale 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, dargestellt durch die Schnittstelle HTMLElement. Die HTMLElement-Klasse implementiert wiederum Node, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise stehen die strukturellen Merkmale, die von der Schnittstelle Node implementiert werden, auch für HTML-Elemente zur Verfügung, sodass sie ineinander verschachtelt, erstellt und gelöscht, verschoben usw. werden können.

Die Schnittstelle HTMLElement ist jedoch generell und bietet nur die Funktionalität, die allen HTML-Elementen gemeinsam ist, wie die ID des Elements, seine Koordinaten, das HTML, das das Element ausmacht, Informationen über die Scrollposition und so weiter.

Um die Funktionalität der grundlegenden HTMLElement-Schnittstelle zu erweitern und die für ein bestimmtes Element benötigten Funktionen bereitzustellen, wird die HTMLElement-Klasse unterklassifiziert, um die benötigten 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 um Eigenschaften wie height und Methoden wie getContext(), um canvas-spezifische Funktionen bereitzustellen.

Die allgemeine Vererbung für HTML-Elementklassen sieht folgendermaßen aus:

Hierarchie von Schnittstellen für HTML-Elemente

Auf diese Weise erbt ein Element die Eigenschaften und Methoden all seiner Vorfahren. Betrachten Sie beispielsweise ein <a>-Element, das im DOM durch ein Objekt vom Typ HTMLAnchorElement repräsentiert wird. Das Element umfasst dann die anker-spezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, sowie diejenigen, die von HTMLElement und Element definiert sind, sowie von Node und letztendlich EventTarget.

Jede Ebene definiert einen wesentlichen Aspekt des Nutzens des Elements. Von Node erbt das Element Konzepte rund um die Fähigkeit, von einem anderen Element enthalten zu sein und selbst andere Elemente zu enthalten. Von besonderer Bedeutung ist, was durch Vererbung von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspiel- und Pausevorgänge usw. zu empfangen und zu verarbeiten.

Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen Zwischentyp 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 usw. HTMLMediaElement definiert die zwischen Audio- und Videoelementen gemeinsamen Methoden und Eigenschaften.

Diese element-spezifischen Schnittstellen bilden den Großteil der HTML-DOM-API und stehen im Fokus dieses Artikels. Um mehr über die tatsächliche Struktur des DOM zu erfahren, siehe Einführung in das DOM.

Zielgruppe der HTML-DOM

Die von der HTML-DOM bereitgestellten Funktionen gehören zu den am häufigsten verwendeten APIs im Werkzeugkasten eines Webentwicklers. Alle außer den einfachsten Webanwendungen nutzen einige Funktionen der HTML-DOM.

Schnittstellen der HTML-DOM-API

Der Großteil der zur HTML-DOM-API gehörenden Schnittstellen entspricht nahezu eins zu eins einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität. Darüber hinaus enthält 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 Gruppen verwandter Elemente, die dieselben Eigenschaften und Methoden mit ihnen verbunden haben).

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 Zustand des Browsers, verfügbare Plugins (falls vorhanden) und verschiedene Konfigurationsoptionen.

Veraltete Web-App- und Browser-Integrationsschnittstellen

Obsolete Web-App- und Browser-Integrationsschnittstellen

Formulare-Unterstützungsschnittstellen

Diese Schnittstellen bieten die Struktur und Funktionalität, die für die Elemente erforderlich sind, die zur Erstellung und Verwaltung von Formularen verwendet werden, 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 den <picture>-Elementen verwendet werden.

Medien-Schnittstellen

Die Medien-Schnittstellen 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 darzustellen und den Zieh-und-Ablegen-Prozess zu verwalten.

Seitenverlauf-Schnittstellen

Die History-API-Schnittstellen ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers sowie das Vor- und Zurückverschieben des aktuellen Tabs im Browser durch diesen Verlauf.

Web-Komponenten-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 unterschiedliche Weise in der HTML-DOM-API verwendet. Darüber hinaus repräsentiert PromiseRejectionEvent das Ereignis, das ausgelöst wird, wenn ein JavaScript Promise abgelehnt wird.

Schnittstellen, die zu anderen APIs gehören

Einige Schnittstellen sind technisch in der HTML-Spezifikation definiert, während sie eigentlich Teil anderer APIs sind.

Web Storage Schnittstellen

Die Web Storage API ermöglicht es Websites, Daten entweder vorübergehend 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 verwendet, um sowohl die Fähigkeit der Worker zur Interaktion mit einer App und ihren Inhalten zu etablieren, als auch um die Nachrichtenübermittlung zwischen Fenstern oder Apps zu unterstützen.

WebSocket Schnittstellen

Diese Schnittstellen, definiert durch die HTML-Spezifikation, werden von der WebSockets API verwendet.

Server-sent events Schnittstellen

Die Schnittstelle EventSource repräsentiert die Quelle, die servergesendete Ereignisse sendet oder gesendet hat.

Beispiele

In diesem Beispiel wird das input-Ereignis eines <input>-Elements überwacht, um den Status des "Abschicken"-Buttons eines Formulars basierend darauf zu aktualisieren, ob ein bestimmtes Feld derzeit einen Wert hat oder nicht.

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 Document-Schnittstelle und deren getElementById()-Methode, um das DOM-Objekt darzustellen, 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 diese Elemente bereitstellen und die Kontrolle über diese Elemente ermöglichen.

Das HTMLInputElement-Objekt für die disabled-Eigenschaft des "Senden"-Buttons wird auf true gesetzt, wodurch der "Senden"-Button deaktiviert wird, sodass er nicht angeklickt werden kann. Zusätzlich wird das Eingabefeld für den Benutzernamen durch Aufrufen der focus()-Methode, die es von HTMLElement erbt, zum aktiven Fokus gemacht.

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 Wertes der Eingabe; wenn er null ist, wird der "Senden"-Button deaktiviert, falls er nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass der Button aktiviert ist.

Mit diesem Vorgehen wird der "Senden"-Button immer aktiviert, wenn das Eingabefeld für den Benutzernamen 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