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

Die funktionalen Bereiche, die in der HTML DOM API enthalten sind, 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 Browserverlauf.
  • 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 Verwendung

In diesem Artikel konzentrieren wir uns auf die Teile des HTML DOM, die das Arbeiten mit HTML-Elementen betreffen. Eine Diskussion ü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 ein grundlegender Datensatz ist, der ein einzelnes Objekt im Dokument darstellt (wie ein Element oder einen Textknoten).

Knoten können streng organisatorisch sein, als Mittel zur Gruppierung anderer Knoten oder um einen Punkt zu schaffen, an dem eine Hierarchie konstruiert 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 bietet.

Knoten haben kein Konzept zum Einfügen des Inhalts, der tatsächlich im Dokument angezeigt wird. Sie sind leere Gefäße. Der grundlegende Begriff eines Knotens, der visuelle Inhalte darstellen kann, wird durch die Schnittstelle Element eingeführt. Eine Element- Objektinstanz stellt ein einzelnes Element in einem Dokument dar, 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, die darin verschachtelt sind:

Struktur eines Dokuments mit Elementen in einem Dokument in einem Fenster

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

Zu den Dingen, die durch den HTML-Standard zu Document hinzugefügt werden, gehören:

  • Unterstützung beim 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, die verweisende Seite Referrer und so weiter.
  • Zugriff auf Listen von Elementen im <head> Block und im body des Dokuments sowie Listen von Bildern, Links, Skripten usw., die im Dokument enthalten sind.
  • Unterstützung der Interaktion mit dem Benutzer durch Untersuchung des Fokus und durch Ausführung von Befehlen auf bearbeitbarem Inhalt.
  • Ereignisbehandler für Dokumentereignisse, die durch den HTML-Standard definiert sind, um Zugang zu Maus und Tastatur Ereignissen, Drag and Drop, Mediensteuerung und mehr zu ermöglichen.
  • Ereignisbehandler für Ereignisse, die sowohl an Elemente als auch an Dokumente gesendet werden können; derzeit umfassen sie nur Kopieren, Ausschneiden und Einfügen Aktionen.

HTML-Element-Schnittstellen

Die Schnittstelle Element wurde speziell angepasst, um HTML-Elemente durch die Einführung der Schnittstelle HTMLElement zu repräsentieren, von der alle spezifischeren HTML-Elementklassen erben. Dies erweitert die Element-Klasse, um HTML-spezifische allgemeine Funktionen zu den Elementknoten hinzuzufügen. Zu den durch 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, das durch die Schnittstelle HTMLElement dargestellt wird. Die HTMLElement-Klasse wiederum implementiert Node, so dass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise stehen die durch die Schnittstelle Node implementierten strukturellen Merkmale auch HTML-Elementen zur Verfügung, die es ihnen ermöglichen, ineinander verschachtelt, erstellt, gelöscht, verschoben usw. zu werden.

Die Schnittstelle HTMLElement ist jedoch generisch und bietet nur die für alle HTML-Elemente gemeinsamen Funktionen wie die ID des Elements, seine Koordinaten, das HTML, aus dem das Element besteht, Informationen über die Scrollposition usw.

Um die Funktionalität der Kernschnittstelle HTMLElement zu erweitern und die für ein bestimmtes Element benötigten Funktionen bereitzustellen, wird die HTMLElement-Klasse untergeordnet, um die benötigten Eigenschaften und Methoden hinzuzufügen. Beispielsweise wird das <canvas>-Element durch ein Objekt vom Typ HTMLCanvasElement dargestellt. HTMLCanvasElement erweitert den HTMLElement-Typ, indem es Eigenschaften wie height und Methoden wie getContext() hinzufügt, um Canvas-spezifische Funktionen bereitzustellen.

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

Hierarchie der Schnittstellen für HTML-Elemente

Als solches erbt ein Element die Eigenschaften und Methoden all seiner Vorfahren. Betrachten Sie zum Beispiel ein <a>-Element, das im DOM durch ein Objekt des Typs HTMLAnchorElement dargestellt wird. Das Element enthält dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentschnittstelle dieser Klasse beschrieben sind, aber auch diejenigen, die von HTMLElement und Element, sowie von Node und schließlich von EventTarget definiert sind.

Jede Ebene definiert einen entscheidenden Aspekt des Nutzens des Elements. Von Node erbt das Element Konzepte, die die Fähigkeit betreffen, dass das Element von einem anderen Element enthalten sein kann und selbst andere Elemente enthalten kann. Von besonderer Bedeutung ist das, was durch die Vererbung von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspielen- und Pause-Ereignisse usw. zu empfangen und zu verarbeiten.

Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen Zwischentyp haben. Beispielsweise präsentieren die Elemente <audio> und <video> 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 gemeinsam für Audio- und Videoelemente sind.

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

Zielgruppe der HTML DOM API

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

HTML DOM API-Schnittstellen

Der Großteil der Schnittstellen, die die HTML DOM API bilden, entspricht fast eins zu eins individuellen HTML-Elementen oder kleinen Gruppen von Elementen mit ähnlicher Funktionalität. Zusätzlich enthält die HTML DOM API einige Schnittstellen und Typen zur Unterstützung der HTML-Elementschnittstellen.

HTML-Element-Schnittstellen

Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Sätze verwandter Elemente, die die gleichen Eigenschaften und Methoden haben).

Veraltete HTML-Element-Schnittstellen

Obsolete HTML-Element-Schnittstellen

Webanwendungen und Browser-Integrationsschnittstellen

Diese Schnittstellen bieten Zugang zum Browserfenster und Dokument, das das HTML enthält, sowie zum Zustand des Browsers, verfügbaren Plugins (falls vorhanden) und verschiedenen Konfigurationsoptionen.

Veraltete Webanwendungen und Browser-Integrationsschnittstellen

Obsolete Webanwendungen und Browser-Integrationsschnittstellen

Formularunterstützung Schnittstellen

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

Canvas- und Bildschnittstellen

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

Medienschnittstellen

Die Medienschnittstellen ermöglichen den 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) Elemente, Gruppen von gezogenen oder ziehbaren Elementen zu repräsentieren und den Zieh- und Ablegeprozess zu handhaben.

Seitengeschichts-Schnittstellen

Die Schnittstellen der History API ermöglichen den Zugriff auf Informationen zur Verlaufshistorie des Browsers und das Verschieben der aktuellen Registerkarte des Browsers vorwärts und rückwärts durch diese Historie.

Web Components Schnittstellen

Diese Schnittstellen werden von der Web Components API genutzt, um die verfügbaren benutzerdefinierten Elemente zu erstellen und zu verwalten.

Verschiedene und unterstützende Schnittstellen

Diese unterstützenden Objekttypen werden auf vielfältige 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 aber tatsächlich zu anderen APIs.

Webspeicher-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 wiederzuverwenden.

Web Workers Schnittstellen

Diese Schnittstellen werden von der Web Workers API verwendet, um sowohl die Fähigkeit für Worker zu schaffen, mit einer App und ihrem Inhalt zu interagieren, 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 repräsentiert die Quelle, die Server-sent events gesendet hat oder sendet.

Beispiele

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

Das HTMLInputElement Objekt für die disabled Eigenschaft des "Senden"-Knopfs wird auf true gesetzt, was den "Senden"-Knopf deaktiviert, sodass er nicht geklickt 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 versetzt.

Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis zur Benutzernamenseingabe hinzuzufügen. Dieser Code überprüft die Länge des aktuellen Werts der Eingabe; wenn sie null ist, wird der "Senden"-Knopf deaktiviert, falls nicht schon deaktiviert. Ansonsten stellt der Code sicher, dass der Knopf aktiviert ist.

Mit dieser Einstellung ist der "Senden"-Knopf immer aktiviert, wann immer 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 Standard
# htmlelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Referenzen

Leitfäden