HTML DOM API

Baseline

Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

* Einige Teile dieser Funktion werden mglicherweise unterschiedlich gut untersttzt.

Vollstndige Kompatibilitt anzeigen
Mehr erfahren

Die HTML-DOM-API besteht aus den Schnittstellen, die die Funktionalitt der einzelnen Elemente in HTML definieren, sowie aus den untersttzenden Typen und Schnittstellen, auf die sie angewiesen sind.

Die HTML-DOM-API umfasst folgende Funktionsbereiche:

Zugriff auf und Steuerung von HTML-Elementen ber das DOM.
Zugriff auf und Bearbeitung von Formulardaten.
Interaktion mit dem Inhalt von 2D-Bildern und dem Kontext eines HTML-<canvas>-Elements, 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 den Navigationsverlauf des Browsers.
Untersttzende und verbindende Schnittstellen fr andere APIs wie Web Components, Web Storage, Web Workers, WebSocket und serverseitig gesendete Ereignisse.

Konzepte und Verwendung des HTML-DOM

Dieser Artikel konzentriert sich auf die Teile des HTML-DOM, die die Interaktion mit HTML-Elementen betreffen. Informationen zu anderen Bereichen wie Drag and Drop, WebSockets und Web Storage finden Sie in der Dokumentation der jeweiligen 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 Schnittstelle Document reprsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Knoten. Ein Knoten ist dabei ein grundlegender Datensatz, der ein einzelnes Objekt innerhalb des Dokuments reprsentiert, beispielsweise ein Element oder einen Textknoten.

Knoten knnen ausschlielich der Organisation dienen, indem sie andere Knoten gruppieren oder einen Ausgangspunkt fr eine Hierarchie bilden. Andere Knoten knnen sichtbare Bestandteile eines Dokuments reprsentieren. Jeder Knoten basiert auf der Schnittstelle Node, die Eigenschaften zum Abrufen von Informationen ber den Knoten sowie Methoden zum Erstellen, Lschen und Anordnen von Knoten innerhalb des DOM bereitstellt.

Knoten selbst enthalten konzeptionell nicht den Inhalt, der tatschlich im Dokument angezeigt wird. Sie sind leere Behlter. Das grundlegende Konzept eines Knotens, der sichtbare Inhalte reprsentieren kann, wird durch die Schnittstelle Element eingefhrt. Eine Element-Objektinstanz reprsentiert ein einzelnes Element in einem Dokument, das mit HTML oder einem XML-Vokabular wie SVG erstellt wurde.

Betrachten Sie beispielsweise ein Dokument mit zwei Elementen, von denen eines zwei weitere, ineinander verschachtelte Elemente enthlt:

[Struktur eines Dokuments mit Elementen innerhalb eines Dokuments in einem Fenster]

Die Schnittstelle Document ist zwar als Teil der DOM-Spezifikation definiert, wird durch die HTML-Spezifikation jedoch erheblich erweitert. Dadurch kommen Informationen hinzu, die speziell fr die Verwendung des DOM im Kontext eines Webbrowsers sowie fr die Reprsentation von HTML-Dokumenten bentigt werden.

Zu den Ergnzungen des HTML-Standards fr Document gehren:

Untersttzung beim Zugriff auf Informationen aus den HTTP-Headern, die beim Laden der Seite bereitgestellt werden, etwa den Speicherort, von dem das Dokument geladen wurde, Cookies, das nderungsdatum und die verweisende Website.
Zugriff auf Listen der Elemente im <head>-Block und im body des Dokuments sowie auf Listen der darin enthaltenen Bilder, Links und Skripte.
Untersttzung bei der Interaktion mit Benutzern durch das Prfen des Fokus und das Ausfhren von Befehlen fr bearbeitbare Inhalte.
Event-Handler fr Dokumentereignisse, die durch den HTML-Standard definiert sind und den Zugriff auf Maus- und Tastaturereignisse, Drag and Drop, die Mediensteuerung und mehr ermglichen.
Event-Handler fr Ereignisse, die sowohl an Elemente als auch an Dokumente bermittelt werden knnen. Dazu gehren derzeit nur die Aktionen copy, cut und paste.

Schnittstellen fr HTML-Elemente

Die Schnittstelle Element wurde durch die Einfhrung der Schnittstelle HTMLElement, von der alle spezifischeren Klassen fr HTML-Elemente erben, weiter an die Reprsentation von HTML-Elementen angepasst. Dadurch wird die Klasse Element um allgemeine HTML-spezifische Funktionen fr Elementknoten erweitert. Zu den von HTMLElement hinzugefgten Eigenschaften gehren beispielsweise hidden und innerText.

Ein HTML-Dokument ist ein DOM-Baum, dessen Elementknoten HTML-Elemente sind, die durch die Schnittstelle HTMLElement reprsentiert werden. Die Klasse HTMLElement implementiert wiederum Node. Somit ist jedes Element auch ein Knoten, aber nicht jeder Knoten ein Element. Auf diese Weise stehen die von der Schnittstelle Node bereitgestellten strukturellen Funktionen auch HTML-Elementen zur Verfgung. So knnen Elemente ineinander verschachtelt, erstellt, gelscht und verschoben werden.

Die Schnittstelle HTMLElement ist jedoch generisch und stellt nur Funktionen bereit, die allen HTML-Elementen gemeinsam sind, etwa die ID und die Koordinaten des Elements, das HTML, aus dem das Element besteht, und Informationen zur Scrollposition.

Um die grundlegende Schnittstelle HTMLElement um die fr ein bestimmtes Element bentigten Funktionen zu erweitern, wird von der Klasse HTMLElement eine Unterklasse mit den erforderlichen Eigenschaften und Methoden abgeleitet. Das Element <canvas> wird beispielsweise durch ein Objekt des Typs HTMLCanvasElement reprsentiert. HTMLCanvasElement erweitert den Typ HTMLElement um Eigenschaften wie height und Methoden wie getContext(), die Canvas-spezifische Funktionen bereitstellen.

Die Vererbungshierarchie der Klassen fr HTML-Elemente sieht insgesamt so aus:

[Hierarchie der Schnittstellen fr HTML-Elemente]

Ein Element erbt somit die Eigenschaften und Methoden aller seiner Vorfahren. Betrachten Sie beispielsweise ein <a>-Element, das im DOM durch ein Objekt des Typs HTMLAnchorElement reprsentiert wird. Das Element verfgt ber die in der Dokumentation dieser Klasse beschriebenen spezifischen Eigenschaften und Methoden sowie ber die Eigenschaften und Methoden von HTMLElement, Element, Node und schlielich EventTarget.

Jede Ebene trgt einen wesentlichen Aspekt zur Funktionalitt des Elements bei. Von Node erbt das Element die Fhigkeit, in einem anderen Element enthalten zu sein und selbst andere Elemente zu enthalten. Besonders wichtig ist die Vererbung von EventTarget: Sie ermglicht es, Ereignisse wie Mausklicks sowie Wiedergabe- und Pausierungsereignisse zu empfangen und zu verarbeiten.

Manche Elemente haben Gemeinsamkeiten und besitzen deshalb einen zustzlichen gemeinsamen Zwischentyp. Die Elemente <audio> und <video> stellen beispielsweise audiovisuelle Medien dar. Die entsprechenden Typen HTMLAudioElement und HTMLVideoElement basieren beide auf dem gemeinsamen Typ HTMLMediaElement, der wiederum auf HTMLElement basiert. HTMLMediaElement definiert die Methoden und Eigenschaften, die Audio- und Videoelementen gemeinsam sind.

Diese elementspezifischen Schnittstellen machen den grten Teil der HTML-DOM-API aus und stehen im Mittelpunkt dieses Artikels. Der Artikel zum DOM bietet eine allgemeine Einfhrung in das DOM und seine Konzepte.

Zielgruppe des HTML-DOM

Die vom HTML-DOM bereitgestellten Funktionen gehren zu den am hufigsten verwendeten APIs im Werkzeugkasten der Webentwicklung. Fast alle Webanwendungen, mit Ausnahme der einfachsten, nutzen Funktionen des HTML-DOM.

Schnittstellen der HTML-DOM-API

Die meisten Schnittstellen der HTML-DOM-API entsprechen nahezu eins zu eins einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit hnlicher Funktionalitt. Darber hinaus umfasst die HTML-DOM-API einige Schnittstellen und Typen zur Untersttzung der Schnittstellen fr HTML-Elemente.

Schnittstellen fr HTML-Elemente

Diese Schnittstellen reprsentieren bestimmte HTML-Elemente oder Gruppen verwandter Elemente mit denselben Eigenschaften und Methoden.

Veraltete Schnittstellen fr HTML-Elemente

HTMLMarqueeElement

Nicht mehr verwendete Schnittstellen fr HTML-Elemente

Schnittstellen zur Integration von Webanwendungen und Browsern

Diese Schnittstellen ermglichen den Zugriff auf das Browserfenster und das Dokument, die das HTML enthalten, sowie auf den Zustand des Browsers, verfgbare Plugins (sofern vorhanden) und verschiedene Konfigurationsoptionen.

Nicht mehr verwendete Schnittstellen zur Integration von Webanwendungen und Browsern

Schnittstellen zur Untersttzung von Formularen

Diese Schnittstellen stellen die Struktur und Funktionalitt bereit, die fr die Erstellung und Verwaltung von Formularen mit Elementen wie <form> und <input> erforderlich sind.

Schnittstellen fr Canvas und Bilder

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

Medienschnittstellen

Die Medienschnittstellen ermglichen ber HTML den 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 und Gruppen solcher Elemente zu reprsentieren sowie den Drag-and-Drop-Vorgang zu verarbeiten.

Schnittstellen fr den Seitenverlauf

Mit den Schnittstellen der History API knnen Sie auf Informationen zum Browserverlauf zugreifen und den aktuellen Browser-Tab im Verlauf vor- und zurckbewegen.

Schnittstellen fr Web Components

Diese Schnittstellen werden von der Web Components API verwendet, um benutzerdefinierte Elemente zu erstellen und zu verwalten.

CustomElementRegistry

Sonstige und untersttzende Schnittstellen

Diese untersttzenden Objekttypen werden in der HTML-DOM-API auf verschiedene Weise verwendet. Darber hinaus reprsentiert PromiseRejectionEvent das Ereignis, das bei der Ablehnung eines JavaScript-Promise ausgelst wird.

Schnittstellen anderer APIs

Mehrere Schnittstellen sind technisch gesehen in der HTML-Spezifikation definiert, gehren tatschlich aber zu anderen APIs.

Schnittstellen fr Web Storage

Die Web Storage API ermglicht es Websites, Daten zur spteren Wiederverwendung vorbergehend oder dauerhaft auf dem Gert der Benutzer zu speichern.

Schnittstellen fr Web Workers

Diese Schnittstellen werden von der Web Workers API verwendet. Sie ermglichen Workern die Interaktion mit einer Anwendung und deren Inhalten und untersttzen den Nachrichtenaustausch zwischen Fenstern oder Anwendungen.

WebSocket-Schnittstellen

Diese in der HTML-Spezifikation definierten Schnittstellen werden von der WebSockets API verwendet.

Schnittstellen fr serverseitig gesendete Ereignisse

Die Schnittstelle EventSource reprsentiert die Quelle, die serverseitig gesendete Ereignisse gesendet hat oder sendet.

EventSource

Beispiele

In diesem Beispiel wird das Ereignis input eines <input>-Elements berwacht. So wird der Zustand einer Schaltflche Senden abhngig davon aktualisiert, ob das Eingabefeld derzeit einen Wert enthlt.

JavaScript

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 Schnittstelle Document, um die DOM-Objekte abzurufen, die die <input>-Elemente mit den IDs userName und sendButton reprsentieren. ber diese Objekte knnen wir auf Eigenschaften und Methoden zugreifen, die Informationen ber die Elemente bereitstellen und deren Steuerung ermglichen.

Die Eigenschaft disabled des HTMLInputElement-Objekts fr die Schaltflche Senden wird auf true gesetzt. Dadurch wird die Schaltflche deaktiviert und kann nicht angeklickt werden. Auerdem erhlt das Eingabefeld fr den Benutzernamen den aktiven Fokus, indem die von HTMLElement geerbte Methode focus() aufgerufen wird.

Anschlieend wird addEventListener() aufgerufen, um dem Eingabefeld fr den Benutzernamen einen Handler fr das Ereignis input hinzuzufgen. Der Code prft die Lnge des aktuellen Eingabewerts. Ist sie null, wird die Schaltflche Senden deaktiviert, sofern sie nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltflche aktiviert ist.

Damit ist die Schaltflche Senden immer dann aktiviert, wenn das Eingabefeld fr den Benutzernamen einen Wert enthlt, und deaktiviert, wenn es leer ist.

HTML

Das HTML sieht so aus:

html

<p>Please provide the information below. Items marked with "*" are required.</p>
<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="button" value="Send" id="sendButton" />

Ergebnis

Spezifikationen

Spezifikation
HTML # htmlelement

Referenz der HTML-Elemente
Referenz der HTML-Attribute
Referenz zum Document Object Model (DOM)

Leitfden

Einfhrung in die DOM-Skripterstellung

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden