1. Web
  2. Web-APIs
  3. 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

HTML DOM API

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die HTML-DOM-API besteht aus den Schnittstellen, die die Funktionalität jedes einzelnen Elements in HTML definieren, sowie allen unterstützenden Typen und Schnittstellen, auf die sie angewiesen sind.

Zu den funktionalen Bereichen, die in der HTML-DOM-API enthalten sind, gehören:

  • Der Zugriff auf und die Steuerung von HTML-Elementen über das DOM.
  • Der Zugriff auf und die Manipulation von Formular-Daten.
  • Die Interaktion mit den Inhalten von 2D-Bildern und dem Kontext eines HTML-<canvas>, um zum Beispiel auf ihnen zu zeichnen.
  • Die Verwaltung von Medien, die mit den HTML-Medienelementen (<audio> und <video>) verbunden sind.
  • Ziehen und Ablegen von Inhalten auf Webseiten.
  • Der Zugriff auf den Verlauf der Browser-Navigation.
  • Unterstützende und verbindende Schnittstellen für andere APIs, wie z. B. 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 Interagieren mit HTML-Elementen betreffen. Diskussionen über andere Bereiche, wie Ziehen und Ablegen, WebSockets, Web Storage usw. finden Sie in der Dokumentation für diese 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 repräsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Knoten, wobei ein Knoten einen fundamentalen Datensatz darstellt, der ein einzelnes Objekt im Dokument (wie ein Element oder Textknoten) repräsentiert.

Knoten können rein organisatorisch sein und ein Mittel zur Gruppierung anderer Knoten oder zur Bereitstellung eines Punktes anbieten, an dem eine Hierarchie aufgebaut 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, den tatsächlich angezeigten Inhalt im Dokument einzuschließen. Sie sind leere Gefäße. Die grundlegende Vorstellung eines Knotens, der visuellen Inhalt 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 in sich verschachtelt hat:

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 spezifische Informationen für die Verwendung des DOM im Kontext eines Webbrowsers sowie für die Darstellung von HTML-Dokumenten hinzuzufügen.

Zu den von der HTML-Standard hinzugefügten Informationen zu Document gehören:

  • Unterstützung für den Zugriff auf verschiedene Informationen, die von den HTTP-Headern beim Laden der Seite bereitgestellt werden, wie der Ort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, verweisende Website und so weiter.
  • Zugriff auf Listen von Elementen im <head>-Block und body des Dokuments sowie auf Listen der im Dokument enthaltenen Bilder, Links, Skripte usw.
  • Unterstützung für die Interaktion mit dem Benutzer durch Prüfung des Fokus und durch Ausführen von Befehlen auf bearbeitbaren Inhalten.
  • Ereignis-Handler für Dokumentereignisse, die vom HTML-Standard definiert werden, um Zugriff auf Maus- und Tastaturereignisse, Ziehen und Ablegen, Mediensteuerung und mehr zu ermöglichen.
  • Ereignis-Handler für Ereignisse, die sowohl an Elemente als auch an Dokumente geliefert werden können; diese umfassen derzeit nur die Aktionen copy, cut und paste.

HTML-Element-Schnittstellen

Die Element-Schnittstelle wurde speziell angepasst, um HTML-Elemente darzustellen, indem die HTMLElement-Schnittstelle eingeführt wurde, die alle spezifischeren HTML-Elementklassen von ihr 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 implementiert ihrerseits Node, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise stehen die strukturellen Funktionen, die durch die Node-Schnittstelle implementiert werden, auch HTML-Elementen zur Verfügung, sodass diese ineinander verschachtelt, erstellt und gelöscht, verschoben und so weiter 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, das HTML, das das Element bildet, Informationen über die Scroll-Position usw.

Um die Funktionalität der Kern-HTMLElement-Schnittstelle zu erweitern, um die für ein bestimmtes Element erforderlichen Funktionen bereitzustellen, wird die HTMLElement-Klasse unterklassifiziert, um die erforderlichen Eigenschaften und Methoden hinzuzufügen. Zum Beispiel wird das <canvas>-Element durch ein Objekt des Typs HTMLCanvasElement repräsentiert. 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

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

Jede Ebene definiert einen wesentlichen Aspekt des Nutzens des Elements. Von Node erbt das Element Konzepte rund um die Möglichkeit, dass das Element von einem anderen Element enthalten werden kann und selbst andere Elemente enthalten kann. Von besonderer Bedeutung ist, was durch das Erben von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Start- und Stop-Ereignisse und so weiter 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 elementspezifischen Schnittstellen machen den Großteil der HTML-DOM-API aus und sind der Fokus dieses Artikels. Der DOM-Artikel bietet eine allgemeine Einführung in das DOM und seine Konzepte.

Zielpublikum der HTML-DOM

Die von der 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 der HTML-DOM nutzen.

HTML-DOM-API-Schnittstellen

Die Mehrheit der Schnittstellen, die die HTML-DOM-API bilden, entspricht nahezu eins zu eins einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität. Darüber hinaus umfasst die HTML-DOM-API einige Schnittstellen und Typen, um die HTML-Element-Schnittstellen zu unterstützen.

HTML-Element-Schnittstellen

Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Sätze von verwandten Elementen, die die gleichen Eigenschaften und Methoden mit ihnen teilen).

Veraltete HTML-Element-Schnittstellen

Überholte HTML-Element-Schnittstellen

Schnittstellen zur Integration von Web-Apps und Browsern

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 Schnittstellen zur Integration von Web-Apps und Browsern

Überholte Schnittstellen zur Integration von Web-Apps und Browsern

Formulare unterstützende Schnittstellen

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

Canvas- und Bildschnittstellen

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

Medienschnittstellen

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

Ziehen und Ablegen 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.

Seitenverlauf-Schnittstellen

Die Schnittstellen der History API ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers sowie das Vorwärts- und Rückwärtsverschieben des aktuellen Tabs im Browser 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 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 im HTML-Standard definiert, gehören aber tatsächlich zu anderen APIs.

Web Storage Schnittstellen

Die Web Storage API bietet die Möglichkeit, dass Websites Daten entweder temporär oder dauerhaft auf dem Gerät des Benutzers für die spätere Wiederverwendung speichern können.

Web Worker Schnittstellen

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

WebSocket Schnittstellen

Diese Schnittstellen, die im HTML-Standard 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 Zustand 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 Methode getElementById() der Document-Schnittstelle, um das DOM-Objekt zu erhalten, das die <input>-Elemente repräsentiert, deren IDs userName und sendButton sind. Mit diesen können wir auf die Eigenschaften und Methoden zugreifen, die Informationen über diese Elemente bereitstellen und die Kontrolle über sie ermöglichen.

Das HTMLInputElement-Objekt für die disabled-Eigenschaft der "Senden"-Schaltfläche wird auf true gesetzt, was die "Senden"-Schaltfläche deaktiviert, sodass sie nicht angeklickt werden kann. Darüber hinaus wird das Benutzername-Eingabefeld durch Aufrufen der focus()-Methode, die es von HTMLElement erbt, auf den aktiven Fokus gebracht.

Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis der Benutzernamen-Eingabe hinzuzufügen. Dieser Code prüft die Länge des aktuellen Wertes der Eingabe; wenn sie null ist, dann wird die "Senden"-Schaltfläche deaktiviert, es sei denn, sie ist bereits deaktiviert. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.

Mit dieser Einrichtung 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

Spezifikation
HTML
# htmlelement

Browser-Kompatibilität

Siehe auch

Referenzen

Leitfäden

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden