Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
DieHTML-DOM-API besteht aus den Schnittstellen, die die Funktionalität jedes einzelnenElemente inHTML 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 dasDOM.
- 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 wieWeb Components,Web Storage,Web Workers,WebSocket undServer-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, wieDrag 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 einesdocument beschreibt; jedes Dokument wird durch eine Instanz derDocument-Schnittstelle repräsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum vonKnoten (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 derNode-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 dieElement-Schnittstelle eingeführt. EineElement-Objektinstanz repräsentiert ein einzelnes Element in einem Dokument, das entweder mit HTML oder einerXML-Vokabular wieSVG erstellt wurde.
Betrachten Sie zum Beispiel ein Dokument mit zwei Elementen, von denen eines zwei weitere Elemente enthält:
Während dieDocument-Schnittstelle als Teil derDOM-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 zuDocument hinzugefügt wurden, gehören:
- Unterstützung für den Zugriff auf verschiedene Informationen, die von denHTTP-Headern beim Laden der Seite bereitgestellt werden, wie z. B. derOrt, von dem das Dokument geladen wurde,Cookies,Änderungsdatum,Referenzseite usw.
- Zugriff auf Listen von Elementen im
<head>-Block des Dokuments undbody, sowie auf Listen der im Dokument enthaltenenBilder,Links,Skripte, etc. - Unterstützung für die Interaktion mit dem Benutzer durch Prüfung desFokus und durch Ausführen von Befehlen aufbearbeitbare Inhalte.
- Ereignishandler für Dokumentereignisse, die durch den HTML-Standard definiert wurden, um den Zugriff aufMaus- undTastatur-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
DieElement-Schnittstelle wurde speziell weiterentwickelt, um HTML-Elemente zu repräsentieren, indem dieHTMLElement-Schnittstelle eingeführt wurde, von der alle spezifischeren HTML-Elementklassen erben. Dies erweitert dieElement-Klasse, um HTML-spezifische allgemeine Funktionen zu den Elementknoten hinzuzufügen. VonHTMLElement hinzugefügte Eigenschaften umfassen beispielsweisehidden undinnerText.
EinHTML-Dokument ist ein DOM-Baum, in dem jeder der Knoten ein HTML-Element ist, repräsentiert durch dieHTMLElement-Schnittstelle. DieHTMLElement-Klasse implementiert wiederumNode, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise sind die strukturellen Merkmale, die von derNode-Schnittstelle implementiert werden, auch für HTML-Elemente verfügbar, wodurch sie innerhalb voneinander verschachtelt, erstellt und gelöscht, verschoben usw. werden können.
DieHTMLElement-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 dieHTMLElement-Klasse unterklassifiziert, um die benötigten Eigenschaften und Methoden hinzuzufügen. Zum Beispiel wird das<canvas>-Element durch ein Objekt vom TypHTMLCanvasElement repräsentiert.HTMLCanvasElement ergänzt denHTMLElement-Typ, indem es Eigenschaften wieheight und Methoden wiegetContext() hinzufügt, um canvas-spezifische Funktionen bereitzustellen.
Die gesamte Vererbung für HTML-Elementklassen sieht folgendermaßen aus:
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 TypHTMLAnchorElement repräsentiert wird. Das Element umfasst dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, aber auch die, die durchHTMLElement undElement sowie vonNode und schließlich vonEventTarget definiert sind.
Jede Ebene definiert einen Schlüsselaspekt der Nützlichkeit des Elements. VonNode 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 vonEventTarget 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 undHTMLVideoElement, basieren beide auf dem gemeinsamen TypHTMLMediaElement, der wiederum aufHTMLElement 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. DerDOM-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).
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
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 derHTML 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 derWeb Components API verwendet, um verfügbarebenutzerdefinierte 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äsentiertPromiseRejectionEvent das Ereignis, das ausgeliefert wird, wenn einJavaScriptPromise 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
DieWeb 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 derWeb 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.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
WebSocket-Schnittstellen
Diese Schnittstellen, die durch die HTML-Spezifikation definiert sind, werden von derWebSockets API verwendet.
Server-sent events Schnittstellen
DieEventSource-Schnittstelle stellt die Quelle dar, welcheserver-gesendete Ereignisse gesendet hat oder sendet.
Beispiele
In diesem Beispiel wird dasinput-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
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 diegetElementById()-Methode derDocument-Schnittstelle, um das DOM-Objekt zu erhalten, das die<input>-Elemente repräsentiert, deren IDsuserName undsendButton sind. Damit können Sie auf die Eigenschaften und Methoden zugreifen, die Informationen bereitstellen und die Kontrolle über diese Elemente gewähren.
DasHTMLInputElement-Objekt für die "Senden"-Schaltfläche hat diedisabled-Eigenschaft auftrue gesetzt, was die "Senden"-Schaltfläche deaktiviert, sodass sie nicht angeklickt werden kann. Außerdem wird das Benutzernamen-Eingabefeld durch Aufruf derfocus()-Methode, die sie vonHTMLElement erbt, als aktiver Fokus gesetzt.
Dann wirdaddEventListener() aufgerufen, um einen Handler für dasinput-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:
<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" /> (*) </p> <p> <label for="userEmail">Email:</label> <input type="email" /> </p> <input type="submit" value="Send" /></form>Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # htmlelement |