1. Web
  2. Web-APIs
  3. The HTML DOM API

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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 ⁨Juli 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 Elemente in HTML definieren, sowie aus unterstützenden Typen und Schnittstellen, auf die sie angewiesen sind.

Die funktionalen Bereiche, die in der HTML-DOM-API enthalten sind, umfassen:

  • Zugriff und Steuerung von HTML-Elementen über das DOM.
  • Zugriff und Manipulation von Formulardaten.
  • Interaktion mit den Inhalten 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 die Browser-Navigation.
  • 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-DOMs, die das Arbeiten mit HTML-Elementen beinhalten. Diskussionen über andere Bereiche, wie Drag and Drop, WebSockets, Web Storage, etc. finden sich in der Dokumentation zu diesen APIs.

Struktur eines HTML-Dokuments

Das Document Object Model (DOM) ist eine Architektur, die die Struktur eines document beschreibt; jedes Dokument wird durch eine Instanz der Document-Schnittstelle repräsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Knoten (nodes), wobei ein Knoten einen grundlegenden Datensatz darstellt, der ein einzelnes Objekt innerhalb des Dokuments (z. B. ein Element oder Textknoten) repräsentiert.

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 repräsentieren. 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 bietet.

Knoten haben kein Konzept des tatsächlichen Inhalts, der im Dokument angezeigt wird. Sie sind leere Gefäße. Der grundlegende Begriff 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 einer 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 innerhalb eines Dokuments in einem Fenster

Während die Document-Schnittstelle als Teil der DOM-Spezifikation definiert ist, wird sie durch die HTML-Spezifikation erheblich verbessert, um Informationen hinzuzufügen, die spezifisch für die Verwendung des DOM im Kontext eines Webbrowsers und für die spezifische Repräsentation von HTML-Dokumenten sind.

Zu den Dingen, die vom 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 z. B. der Ort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, Referenzseite usw.
  • Zugriff auf Listen von Elementen im <head>-Block des Dokuments und body, sowie auf Listen der im Dokument enthaltenen Bilder, Links, Skripte, etc.
  • Unterstützung für die Interaktion mit dem Benutzer durch Prüfung des Fokus und durch Ausführen von Befehlen auf bearbeitbare Inhalte.
  • Ereignishandler für Dokumentereignisse, die durch den HTML-Standard definiert wurden, um den Zugriff auf Maus- und Tastatur-Ereignisse, Drag and Drop, Mediensteuerung usw. zu ermöglichen.
  • Ereignishandler für Ereignisse, die sowohl an Elemente als auch an Dokumente geliefert werden können; diese umfassen derzeit nur „copy“, „cut“ und „paste“-Aktionen.

HTML-Element-Schnittstellen

Die Element-Schnittstelle wurde speziell weiterentwickelt, um HTML-Elemente zu repräsentieren, 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 Elementknoten hinzuzufügen. Von HTMLElement hinzugefügte Eigenschaften umfassen beispielsweise hidden und innerText.

Ein HTML-Dokument ist ein DOM-Baum, in dem jeder der Knoten ein HTML-Element ist, repräsentiert durch die HTMLElement-Schnittstelle. Die HTMLElement-Klasse implementiert wiederum Node, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise sind die strukturellen Merkmale, die von der Node-Schnittstelle implementiert werden, auch für HTML-Elemente verfügbar, wodurch sie innerhalb voneinander 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, der HTML-Code, aus dem das Element besteht, Informationen über die Scroll-Position und so weiter.

Um die Funktionalität der Kern-HTMLElement-Schnittstelle zu erweitern und die Funktionen bereitzustellen, die ein spezifisches Element benötigt, 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, indem es Eigenschaften wie height und Methoden wie getContext() hinzufügt, um canvas-spezifische Funktionen bereitzustellen.

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

Hierarchie der Schnittstellen für HTML-Elemente

Ein Element erbt somit die Eigenschaften und Methoden aller seiner Vorfahren. Zum Beispiel betrachten wir ein <a>-Element, das im DOM durch ein Objekt vom Typ HTMLAnchorElement repräsentiert wird. Das Element umfasst dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, aber auch die, die durch HTMLElement und Element sowie von Node und schließlich von EventTarget definiert sind.

Jede Ebene definiert einen Schlüsselaspekt der Nützlichkeit des Elements. Von Node erbt das Element Konzepte, die die Fähigkeit betreffen, das Element in ein anderes Element einzufügen, und selbst andere Elemente zu enthalten. Von besonderer Bedeutung ist, was durch das Erben von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Wiedergabe- und Pausen-Ereignisse usw. zu empfangen und zu verarbeiten.

Es gibt Elemente, die Gemeinsamkeiten aufweisen und daher einen zusätzlichen Zwischen-Typ 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 Methoden und Eigenschaften, die Audio- und Videoelemente gemeinsam haben.

Diese elementspezifischen Schnittstellen umfassen den Großteil der HTML-DOM-API und sind der Fokus dieses Artikels. Der DOM-Artikel bietet eine allgemeine Einführung in das DOM und seine Konzepte.

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 verwenden einige Funktionen der HTML-DOM.

Schnittstellen der HTML-DOM-API

Die meisten der Schnittstellen, die die HTML-DOM-API bilden, korrelieren fast eins zu eins mit individuellen HTML-Elementen oder zu einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität. Außerdem 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 Gruppen verwandter Elemente, die die gleichen Eigenschaften und Methoden haben).

Veraltete Schnittstellen für HTML-Elemente

Obsolete Schnittstellen für HTML-Elemente

Schnittstellen zur Webanwendungs- und Browserintegration

Diese Schnittstellen bieten Zugriff auf das Browserfenster und das Dokument, das das HTML enthält, sowie auf den Zustand des Browsers und verfügbare Plugins (falls vorhanden) und verschiedene Konfigurationsoptionen.

Veraltete Schnittstellen zur Webanwendungs- und Browserintegration

Obsolete Schnittstellen zur Webanwendungs- und Browserintegration

Formunterstützung-Schnittstellen

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

Canvas- und Image-Schnittstellen

Diese Schnittstellen repräsentieren Objekte, die durch die Canvas-API verwendet werden, sowie das <img>-Element und <picture>-Elemente.

Medien-Schnittstellen

Die Medienschnittstellen bieten HTML-Zugriff auf die Inhalte der Medienelemente: <audio> und <video>.

Drag- und Drop-Schnittstellen

Diese Schnittstellen werden von der HTML Drag and Drop API verwendet, um einzelne ziehbare (oder gezogene) Elemente, Gruppen von gezogenen oder ziehbaren Elementen zu repräsentieren und um den Zieh- und Ablegeverfahren zu handhaben.

Seitenhistorie-Schnittstellen

Die Schnittestellen der History API bieten die Möglichkeit, Informationen über die Browserhistorie zuzugreifen und die aktuelle Registerkarte des Browsers vorwärts und rückwärts durch diese Historie zu bewegen.

Web Components-Schnittstellen

Diese Schnittstellen werden von der Web Components API verwendet, um verfügbare benutzerdefinierte 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 ausgeliefert wird, wenn ein JavaScript Promise abgelehnt wird.

Schnittstellen, die anderen APIs angehören

Mehrere Schnittstellen werden technisch gesehen 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 vorübergehend oder dauerhaft auf dem Gerät des Benutzers zu speichern, um sie später erneut zu verwenden.

Web Workers-Schnittstellen

Diese Schnittstellen werden von der Web Workers API verwendet, um sowohl die Fähigkeit zu schaffen, dass Worker mit einer App und ihrem Inhalt interagieren können, als auch um Nachrichten zwischen Fenstern oder Apps zu unterstützen.

WebSocket-Schnittstellen

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

Server-sent events Schnittstellen

Die EventSource-Schnittstelle stellt die Quelle dar, welche server-gesendete Ereignisse gesendet hat oder sendet.

Beispiele

In diesem Beispiel wird das input-Ereignis eines <input>-Elements überwacht, um den Status der "Submit"-Schaltfläche 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 getElementById()-Methode der Document-Schnittstelle, um das DOM-Objekt zu erhalten, das die <input>-Elemente repräsentiert, deren IDs userName und sendButton sind. Damit können Sie auf die Eigenschaften und Methoden zugreifen, die Informationen bereitstellen und die Kontrolle über diese Elemente gewähren.

Das HTMLInputElement-Objekt für die "Senden"-Schaltfläche hat die disabled-Eigenschaft auf true gesetzt, was die "Senden"-Schaltfläche deaktiviert, sodass sie nicht angeklickt werden kann. Außerdem wird das Benutzernamen-Eingabefeld durch Aufruf der focus()-Methode, die sie von HTMLElement erbt, als aktiver Fokus gesetzt.

Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis zum Benutzernamen-Eingabefeld hinzuzufügen. Dieser Code betrachtet die Länge des aktuellen Werts der Eingabe; wenn diese 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 Einrichtung ist die "Senden"-Schaltfläche immer aktiviert, wenn das Benutzernamen-Eingabefeld einen Wert hat, und deaktiviert, wenn es leer ist.

HTML

Der HTML-Code 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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden