Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 Elements in HTML definieren, sowie aus unterstützenden Typen und Schnittstellen, auf die sie angewiesen sind.
Die Funktionsbereiche, die in der HTML-DOM-API enthalten sind, umfassen:
In diesem Artikel konzentrieren wir uns auf die Teile des HTML-DOM, die die Interaktion mit HTML-Elementen beinhalten. Diskussionen über andere Bereiche, wie Drag and Drop, WebSockets, Web Storage, etc. finden Sie in der Dokumentation zu diesen APIs.
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 Nodes, wobei ein Node einen grundlegenden Eintrag darstellt, der ein einzelnes Objekt im Dokument repräsentiert (wie ein Element oder einen Textknoten).
Nodes können rein organisatorisch sein und eine Möglichkeit bieten, andere Nodes zu gruppieren oder einen Punkt zu schaffen, an dem eine Hierarchie erstellt werden kann; andere Nodes können sichtbare Komponenten eines Dokuments repräsentieren. Jeder Node basiert auf der Node-Schnittstelle, die Eigenschaften zum Abrufen von Informationen über den Node sowie Methoden zum Erstellen, Löschen und Organisieren von Nodes innerhalb des DOM bereitstellt.
Nodes haben kein Konzept, den tatsächlich im Dokument angezeigten Inhalt einzuschließen. Sie sind leere Gefäße. Die grundlegende Vorstellung eines Knoten, der visuellen Inhalt darstellen kann, wird durch die Element-Schnittstelle eingeführt. Eine Instanz von Element 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 geschachtelt hat:
Während die Document-Schnittstelle als Teil der DOM-Spezifikation definiert ist, verbessert die HTML-Spezifikation sie erheblich, um Informationen hinzuzufügen, die speziell für die Verwendung des DOM im Kontext eines Webbrowsers sowie zur Darstellung von HTML-Dokumenten relevant sind.
Zu den Dingen, die durch den HTML-Standard zu Document hinzugefügt werden, gehören:
Die Element-Schnittstelle wurde weiter angepasst, um HTML-Elemente speziell darzustellen, indem die HTMLElement-Schnittstelle eingeführt wurde, die von allen spezifischeren HTML-Elementklassen geerbt wird. Dies erweitert die Element-Klasse, um HTML-spezifische allgemeine Features 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, das durch die HTMLElement-Schnittstelle dargestellt wird. Die HTMLElement-Klasse implementiert wiederum Node, sodass jedes Element auch ein Node ist (aber nicht umgekehrt). Auf diese Weise stehen die strukturellen Features, die von der Node-Schnittstelle implementiert werden, auch HTML-Elementen zur Verfügung, sodass sie ineinander verschachtelt, erstellt und gelöscht, verschoben und so weiter werden können.
Die HTMLElement-Schnittstelle ist jedoch allgemein 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 Scrollposition und so weiter.
Um die Funktionalität der Kernschnittstelle HTMLElement zu erweitern und die für ein spezifisches Element benötigten Features bereitzustellen, wird die HTMLElement-Klasse erweitert, um die erforderlichen 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 Features bereitzustellen.
Die allgemeine Vererbung für HTML-Elementklassen sieht so aus:
Auf diese Weise erbt ein Element die Eigenschaften und Methoden aller seiner Vorfahren. Betrachten Sie zum Beispiel ein <a>-Element, das im DOM durch ein Objekt des Typs HTMLAnchorElement dargestellt wird. Das Element umfasst dann die ankerspezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, sowie die, die von HTMLElement und Element definiert sind, sowie von Node und schließlich EventTarget.
Jede Ebene definiert einen Schlüsselaspekt der Nützlichkeit des Elements. Von Node erbt das Element Konzepte, die die Fähigkeit betreffen, dass das Element von einem anderen Element enthalten und selber andere Elemente enthalten kann. Besonders wichtig ist das, was durch das Erben von EventTarget gewonnen wird: die Fähigkeit, Ereignisse wie Mausklicks, Abspiel- und Pause-Ereignisse und so weiter zu empfangen und zu behandeln.
Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen Zwischentyp haben. Zum Beispiel stellen die <audio>- und <video>-Elemente beide audiovisuelle Medien dar. 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 zwischen Audio- und Videoelementen gemeinsam sind.
Diese elementspezifischen Schnittstellen bilden den Großteil der HTML-DOM-API und stehen im Mittelpunkt dieses Artikels. Der Artikel über das DOM bietet eine allgemeine Einführung in das DOM und seine Konzepte.
Die von der HTML-DOM offengelegten Funktionen gehören zu den am häufigsten genutzten APIs im Werkzeugkasten eines Webentwicklers. Alle, bis auf die einfachsten Webanwendungen, werden einige der HTML-DOM-Funktionen nutzen.
Die Mehrheit der Schnittstellen, die die HTML-DOM-API ausmachen, stimmen fast eins zu eins mit einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität überein. Zusätzlich umfasst die HTML-DOM-API einige Schnittstellen und Typen zur Unterstützung der HTML-Element-Schnittstellen.
Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Sätze verwandter Elemente, die die gleichen Eigenschaften und Methoden teilen).
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.
Diese Schnittstellen stellen die Struktur und Funktionalität bereit, die von den Elementen benötigt wird, um Formulare zu erstellen und zu verwalten, einschließlich der <form>- und <input>-Elemente.
Diese Schnittstellen repräsentieren Objekte, die von der Canvas-API sowie vom <img>-Element und <picture>-Elementen verwendet werden.
Die Medienschnittstellen bieten HTML-Zugriff auf die Inhalte der Medienelemente: <audio> und <video>.
Diese Schnittstellen werden von der HTML Drag and Drop API verwendet, um einzelne ziehbare (oder gezogene) Objekte, Gruppen von gezogenen oder ziehbaren Objekten zu repräsentieren und um den Drag and Drop-Prozess zu handhaben.
Die Schnittstellen der History API ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers sowie das Vorwärts- und Rückwärtsnavigieren des aktuellen Tabs im Verlauf.
Diese Schnittstellen werden von der Web Components API verwendet, um die verfügbaren benutzerdefinierten Elemente zu erstellen und zu verwalten.
Diese unterstützenden Objekttypen werden in verschiedenen Weisen in der HTML-DOM-API verwendet. Zusätzlich repräsentiert PromiseRejectionEvent das Ereignis, das ausgeliefert wird, wenn ein JavaScript Promise abgelehnt wird.
Mehrere Schnittstellen sind technisch 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 temporär oder dauerhaft auf dem Gerät des Benutzers für eine spätere Wiederverwendung zu speichern.
Diese Schnittstellen werden von der Web Workers API sowohl verwendet, um die Fähigkeit zu schaffen, dass Arbeiter mit einer App und ihren Inhalten interagieren können, als auch um die Nachrichtenübermittlung zwischen Fenstern oder Apps zu unterstützen.
Diese Schnittstellen, die von der HTML-Spezifikation definiert sind, werden von der WebSockets API verwendet.
Die EventSource-Schnittstelle repräsentiert die Quelle, die Server-sent Events gesendet hat oder sendet.
In diesem Beispiel wird das input-Ereignis eines <input>-Elements überwacht, um den Zustand der "Senden"-Schaltfläche eines Formulars basierend darauf zu aktualisieren, ob ein bestimmtes Feld derzeit einen Wert hat oder nicht.
Dieser Code verwendet die Document-Schnittstelle's getElementById()-Methode, 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 Kontrolle über sie gewähren.
Das HTMLInputElement-Objekt für die "Senden"-Schaltfläche besitzt die disabled-Eigenschaft, die auf true gesetzt wird, was die "Senden"-Schaltfläche deaktiviert, so dass sie nicht angeklickt werden kann. Darüber hinaus wird das Benutzername-Eingabefeld durch Aufruf der focus()-Methode, die es von HTMLElement erbt, in den aktiven Fokus genommen.
Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis zur Benutzernamen-Eingabe hinzuzufügen. Dieser Code überprüft die Länge des aktuellen Werts der Eingabe; wenn sie null ist, wird die "Senden" Schaltfläche deaktiviert, falls sie noch nicht deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.
Mit diesem Mechanismus im Platz wird die "Senden" Schaltfläche immer aktiviert, wann immer das Benutzername-Eingabefeld einen Wert hat, und deaktiviert, wenn es leer ist.
Das HTML für das Formular sieht folgendermaßen aus:
| HTML # htmlelement |
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Der Bauplan für ein besseres Internet.
Besuche die gemeinnützige Muttergesellschaft der Mozilla Corporation, die Mozilla Foundation.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.