HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
View in English Always switch to English
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 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, umfassen:
<canvas>
<audio>
<video>
In diesem Artikel konzentrieren wir uns auf die Teile des HTML-DOMs, die das Arbeiten mit HTML-Elementen beinhalten. Diskussionen über andere Bereiche, wie Drag and Drop, WebSockets, Web Storage, etc. finden sich in der Dokumentation zu diesen APIs.
Das Document Object Model (DOM) ist eine Architektur, die die Struktur eines document beschreibt; jedes Dokument wird durch eine Instanz der Document-Schnittstelle repräsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Knoten (nodes), wobei ein Knoten einen grundlegenden Datensatz darstellt, der ein einzelnes Objekt innerhalb des Dokuments (z. B. ein Element oder Textknoten) repräsentiert.
document
Document
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 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 bietet.
Node
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 die Element-Schnittstelle eingeführt. Eine Element-Objektinstanz repräsentiert ein einzelnes Element in einem Dokument, das entweder mit HTML oder einer XML-Vokabular wie SVG erstellt wurde.
Element
Betrachten Sie zum Beispiel ein Dokument mit zwei Elementen, von denen eines zwei weitere Elemente enthält:
Während die Document-Schnittstelle als Teil der DOM-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 zu Document hinzugefügt wurden, gehören:
<head>
Die Element-Schnittstelle wurde speziell weiterentwickelt, um HTML-Elemente zu repräsentieren, 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. Von HTMLElement hinzugefügte Eigenschaften umfassen beispielsweise hidden und innerText.
HTMLElement
hidden
innerText
Ein HTML-Dokument ist ein DOM-Baum, in dem jeder der Knoten ein HTML-Element ist, repräsentiert durch die HTMLElement-Schnittstelle. Die HTMLElement-Klasse implementiert wiederum Node, sodass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise sind die strukturellen Merkmale, die von der Node-Schnittstelle implementiert werden, auch für HTML-Elemente verfügbar, wodurch sie innerhalb voneinander verschachtelt, erstellt und gelöscht, verschoben usw. 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, 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 die HTMLElement-Klasse unterklassifiziert, um die benötigten 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, indem es Eigenschaften wie height und Methoden wie getContext() hinzufügt, um canvas-spezifische Funktionen bereitzustellen.
HTMLCanvasElement
height
getContext()
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 Typ HTMLAnchorElement repräsentiert wird. Das Element umfasst dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, aber auch die, die durch HTMLElement und Element sowie von Node und schließlich von EventTarget definiert sind.
<a>
HTMLAnchorElement
EventTarget
Jede Ebene definiert einen Schlüsselaspekt der Nützlichkeit des Elements. Von Node 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 von EventTarget 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 und HTMLVideoElement, basieren beide auf dem gemeinsamen Typ HTMLMediaElement, der wiederum auf HTMLElement basiert usw. HTMLMediaElement definiert die Methoden und Eigenschaften, die Audio- und Videoelemente gemeinsam haben.
HTMLAudioElement
HTMLVideoElement
HTMLMediaElement
Diese elementspezifischen Schnittstellen umfassen den Großteil der HTML-DOM-API und sind der Fokus dieses Artikels. Der DOM-Artikel bietet eine allgemeine Einführung in das DOM und seine Konzepte.
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.
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.
Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Gruppen verwandter Elemente, die die gleichen Eigenschaften und Methoden haben).
HTMLAreaElement
HTMLBaseElement
HTMLBodyElement
HTMLBRElement
HTMLButtonElement
HTMLDataElement
HTMLDataListElement
HTMLDetailsElement
HTMLDialogElement
HTMLDirectoryElement
HTMLDivElement
HTMLDListElement
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLLabelElement
HTMLLegendElement
HTMLLIElement
HTMLLinkElement
HTMLMapElement
HTMLMenuElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLObjectElement
HTMLOListElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOutputElement
HTMLParagraphElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLSlotElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableElement
HTMLTableRowElement
HTMLTableSectionElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLMarqueeElement
HTMLFontElement
HTMLFrameElement
HTMLFrameSetElement
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.
BarProp
Navigator
Window
External
Plugin
PluginArray
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.
<form>
<input>
FormDataEvent
HTMLFormControlsCollection
HTMLOptionsCollection
RadioNodeList
ValidityState
Diese Schnittstellen repräsentieren Objekte, die durch die Canvas-API verwendet werden, sowie das <img>-Element und <picture>-Elemente.
<img>
<picture>
CanvasGradient
CanvasPattern
CanvasRenderingContext2D
ImageBitmap
ImageBitmapRenderingContext
ImageData
OffscreenCanvas
OffscreenCanvasRenderingContext2D
Path2D
TextMetrics
Die Medienschnittstellen bieten HTML-Zugriff auf die Inhalte der Medienelemente: <audio> und <video>.
AudioTrack
AudioTrackList
MediaError
TextTrack
TextTrackCue
TextTrackCueList
TextTrackList
TimeRanges
TrackEvent
VideoTrack
VideoTrackList
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 um den Zieh- und Ablegeverfahren zu handhaben.
DataTransfer
DataTransferItem
DataTransferItemList
DragEvent
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.
BeforeUnloadEvent
HashChangeEvent
History
Location
PageRevealEvent
PageSwapEvent
PageTransitionEvent
PopStateEvent
Diese Schnittstellen werden von der Web Components API verwendet, um verfügbare benutzerdefinierte Elemente zu erstellen und zu verwalten.
CustomElementRegistry
Diese unterstützenden Objekttypen werden auf verschiedene Weise in der HTML-DOM-API verwendet. Zusätzlich repräsentiert PromiseRejectionEvent das Ereignis, das ausgeliefert wird, wenn ein JavaScript Promise abgelehnt wird.
PromiseRejectionEvent
Promise
DOMStringList
DOMStringMap
ErrorEvent
HTMLAllCollection
MimeType
MimeTypeArray
Mehrere Schnittstellen werden technisch gesehen in der HTML-Spezifikation definiert, während sie tatsächlich Teil anderer APIs sind.
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 erneut zu verwenden.
Storage
StorageEvent
Diese Schnittstellen werden von der Web 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.
BroadcastChannel
DedicatedWorkerGlobalScope
MessageChannel
MessageEvent
MessagePort
SharedWorker
SharedWorkerGlobalScope
Worker
WorkerGlobalScope
WorkerLocation
WorkerNavigator
Diese Schnittstellen, die durch die HTML-Spezifikation definiert sind, werden von der WebSockets API verwendet.
CloseEvent
WebSocket
Die EventSource-Schnittstelle stellt die Quelle dar, welche server-gesendete Ereignisse gesendet hat oder sendet.
EventSource
In diesem Beispiel wird das input-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.
input
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 getElementById()-Methode der Document-Schnittstelle, um das DOM-Objekt zu erhalten, das die <input>-Elemente repräsentiert, deren IDs userName und sendButton sind. Damit können Sie auf die Eigenschaften und Methoden zugreifen, die Informationen bereitstellen und die Kontrolle über diese Elemente gewähren.
getElementById()
userName
sendButton
Das HTMLInputElement-Objekt für die "Senden"-Schaltfläche hat die disabled-Eigenschaft auf true gesetzt, was die "Senden"-Schaltfläche deaktiviert, sodass sie nicht angeklickt werden kann. Außerdem wird das Benutzernamen-Eingabefeld durch Aufruf der focus()-Methode, die sie von HTMLElement erbt, als aktiver Fokus gesetzt.
disabled
true
focus()
Dann wird addEventListener() aufgerufen, um einen Handler für das input-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.
addEventListener()
Mit dieser Einrichtung ist die "Senden"-Schaltfläche immer aktiviert, wenn das Benutzernamen-Eingabefeld einen Wert hat, und deaktiviert, wenn es leer ist.
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="?url=" 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>
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.