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.

Die HTML DOM API besteht aus den Schnittstellen, die die Funktionalität jedes der 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:

  • Zugriff auf und Steuerung 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 um auf ihnen 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 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 Einsatz

In diesem Artikel konzentrieren wir uns auf die Teile des HTML DOM, die die Interaktion mit HTML-Elementen betreffen. Die Diskussion ü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 einen grundlegenden Datensatz darstellt, der ein einzelnes Objekt innerhalb des Dokuments (wie ein Element oder Textknoten) repräsentiert.

Knoten können rein organisatorisch sein, um andere Knoten zu gruppieren oder um 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 Erzeugen, Löschen und Organisieren von Knoten innerhalb des DOM bietet.

Knoten haben kein Konzept des Inhalts, der tatsächlich im Dokument angezeigt wird. Sie sind leere Gefäße. Der grundlegende Ansatz, einen Knoten zu haben, der visuelle Inhalte darstellen kann, wird durch die Element Schnittstelle eingeführt. Ein Element-Objekt repräsentiert ein einzelnes Element in einem Dokument, das entweder mit HTML oder einer XML-Sprache 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, erweitert die HTML-Spezifikation sie erheblich, um Informationen spezifisch für die Verwendung des DOM im Kontext eines Webbrowsers hinzuzufügen, sowie für die Verwendung zur Darstellung von HTML-Dokumenten.

Unter den Erweiterungen für Document durch den HTML-Standard sind:

  • Unterstützung für den Zugriff auf verschiedene Informationen, die durch die HTTP Header bereitgestellt werden, wenn die Seite geladen wird, wie der Ort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, verweisende Seite und weitere.
  • Zugriff auf Listen von Elementen im <head> Block eines Dokuments body, sowie Listen der Bilder, Links, Skripte usw., die im Dokument enthalten sind.
  • Unterstützung der Interaktion mit dem Benutzer durch Prüfung von Fokus und durch Ausführen von Befehlen auf bearbeitbaren Inhalten.
  • Event-Handler für Dokuments-Ereignisse, die durch den HTML-Standard definiert sind, um Zugriff auf Maus und Tastatur Ereignisse, Drag and Drop, Mediensteuerung und mehr zu ermöglichen.
  • Event-Handler für Ereignisse, die sowohl an Elemente als auch Dokumente geliefert werden können; diese umfassen derzeit nur Kopier-, Ausschneide- und Einfüge- Aktionen.

HTML-Element-Schnittstellen

Die Element Schnittstelle wurde weiter angepasst, um spezifische 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 Funktionen 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 HTMLElement Schnittstelle. Die HTMLElement Klasse wiederum implementiert Node, so dass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise stehen den HTML-Elementen die durch die Node Schnittstelle implementierten strukturellen Merkmale zur Verfügung, sodass sie innerhalb eines anderen platziert, erstellt, gelöscht, bewegt usw. werden können.

Das HTMLElement Interface ist jedoch generisch und bietet lediglich die Funktionalität, die für alle HTML-Elemente gemeinsam ist, wie die ID des Elements, seine Koordinaten, das HTML, das das Element ausmacht, Informationen über die Scroll-Position usw.

Um die Funktionalität der Grund-HTMLElement Schnittstelle zu erweitern und die für ein spezifisches Element benötigten Funktionen bereitzustellen, 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 repräsentiert. HTMLCanvasElement ergänzt den HTMLElement Typ durch Hinzufügen von Eigenschaften wie height und Methoden wie getContext(), um auf Canvas-spezifische Funktionen zuzugreifen.

Die allgemeine Vererbung für HTML-Elementklassen sieht so aus:

Hierarchie der Schnittstellen für HTML-Elemente

Ein Element erbt damit 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 werden, aber auch die, die von HTMLElement und Element, sowie von Node und schließlich EventTarget definiert werden.

Jede Ebene definiert einen zentralen Aspekt der Nützlichkeit des Elements. Von Node erbt das Element Konzepte, die sich auf die Fähigkeit beziehen, dass das Element von einem anderen Element enthalten werden kann und selbst andere Elemente enthalten kann. Von besonderer Bedeutung ist, was durch die Vererbung von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspiel- und Pausenereignisse usw. zu empfangen und zu behandeln.

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 und so weiter basiert. HTMLMediaElement definiert die Methoden und Eigenschaften, die zwischen Audio- und Videoelementen gemeinsam sind.

Diese element-spezifischen Schnittstellen machen den Großteil der HTML DOM API aus und sind der 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 durch das HTML DOM bereitgestellten Funktionen gehören zu den am häufigsten genutzten APIs im Werkzeugkasten eines Webentwicklers. Alle bis auf die einfachsten Webanwendungen werden einige Funktionen des HTML DOM verwenden.

Schnittstellen der HTML DOM API

Die Mehrheit der Schnittstellen, die die HTML DOM API bilden, sind nahezu eins-zu-eins mit einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität abgebildet. Zusätzlich 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 die gleichen Eigenschaften und Methoden besitzen).

Veraltete HTML-Element-Schnittstellen

Obsolete HTML-Element-Schnittstellen

Schnittstellen zur Integration von Webanwendungen und Browsern

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

Veraltete Schnittstellen zur Integration von Webanwendungen und Browsern

Obsolete Schnittstellen zur Integration von Webanwendungen und Browsern

Formulare Unterstützungs-Schnittstellen

Diese Schnittstellen bieten die Struktur und Funktionalität, die von Elementen benötigt werden, um Formulare zu erstellen und zu verwalten, einschließlich der <form> und <input> Elemente.

Canvas- und Bild-Schnittstellen

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

Medien-Schnittstellen

Die Medienschniʦtstellen bieten HTML-Zugang zu den Inhalten 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 ziehfähigen Objekten zu repräsentieren und den Drag-and-Drop-Prozess zu verwalten.

Seitenverlauf-Schnittstellen

Die History-API-Schnittstellen ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers sowie die Verschiebung des aktuellen Tabs im Browser vorwärts und rückwärts durch diesen Verlauf.

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 in verschiedener 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

Mehrere Schnittstellen sind technisch in der HTML-Spezifikation definiert, sind aber tatsächlich Teil anderer APIs.

Webspeicher-Schnittstellen

Die Web Storage API bietet die Möglichkeit für Websites, Daten entweder temporär oder dauerhaft auf dem Gerät des Benutzers zu speichern, um sie später wiederzuverwenden.

Web Workers Schnittstellen

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

WebSocket-Schnittstellen

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

Server-sent events Schnittstellen

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

Beispiele

In diesem Beispiel wird das input Ereignis eines <input> Elements überwacht, um den Zustand eines Formular-„Absenden“-Buttons 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 Methode getElementById() der Document Schnittstelle, um das DOM-Objekt zu erhalten, das die input Elemente darstellt, deren IDs userName und sendButton sind. Mit diesen können wir auf die Eigenschaften und Methoden zugreifen, die Informationen über diese Elemente liefern und Kontrolle darüber gewähren.

Das HTMLInputElement Objekt für die „Senden“-Schaltfläche wird so gesetzt, dass die disabled Eigenschaft auf true gesetzt wird, was die „Senden“-Schaltfläche deaktiviert, sodass sie nicht angeklickt werden kann. Zusätzlich wird das Eingabefeld für den Benutzernamen durch Aufrufen der Methode focus(), die es von HTMLElement erbt, in den aktiven Fokus gesetzt.

Dann wird addEventListener() aufgerufen, um einen Handler für das input Ereignis zur Benutzernameneingabe hinzuzufügen. Dieser Code prüft die Länge des aktuellen Werts der Eingabe; wenn sie gleich 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 diesem Platzhalter 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 so 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 Standard
# htmlelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Referenzen

Leitfäden