JavaScript/DOM/HTMLElement
Seite wird gerade überarbeitet, die Links passen noch nicht alle.
Die Schnittstelle HTMLElement ist die Grundlage für alle HTML Elemente, die Sie auf Ihrer Webseite verwenden. Das DOM wurde aber nicht für HTML konzipiert, sondern allgemein für hierarchisch strukturierte Dokumente, und deshalb finden Sie auf dieser Schnittstelle nur die Eigenschaften und Methoden, die speziell für HTML benötigt werden (oder die bei der Entwicklung von HTML hinzukamen und nicht den Weg in das übergreifende DOM gefunden haben).
Die allgemeineren Eigenschaften und Methoden des DOM befinden sich auf den Schnittstellen Element, Node und EventTarget und werden an die HTMLElement-Schnittstelle vererbt. Sie sind auf dieser Seite nicht aufgeführt.
Die HTML-Spezifikation der WHATWG Group ist fragmentiert. Etliche Eigenschaften und Methoden sind direkt auf dieser Schnittstelle definiert, andere werden über Mixins hinzugefügt: HTMLOrSVGElement, GlobalEventHandlers, DocumentAndElementEventHandlers und ElementContentEditable. Ob HTMLOrSVGElement seinen Namen behält oder in HTMLOrForeignElement umbenannt wird, ist zur Zeit (März 2021) ein Streitfall. Die Mixin-Eigenschaften und -Methoden sind hier zwar verlinkt, im Wiki aber unter dem Namen des Mixins eingeordnet.
Die Mixins GlobalEventHandlers und DocumentAndElementEventHandlers enthalten die onXxxx Eigenschaften für die diversen Events, die ein HTML Element auslösen kann und werden hier nicht im Detail aufgeführt.
Um die Sache nicht zu übersichtlich werden zu lassen, fügt das CSSOM (CSS Objekt Modell) der HTMLElement-Schnittstelle noch weitere Eigenschaften hinzu, die in der HTML Spezifikation nicht aufgeführt sind. Die folgende Übersicht weist darauf nicht gesondert hin.
Eigenschaften
Methoden
DOM-Objekte mit der HTMLElement Schnittstelle
Jedes Objekt im Document Object Model (DOM) besitzt die Eigenschaften und Methoden der HTMLElement-Schnittstelle und ihrer Mixins und erbt die Eigenschaften der Eltern-Schnittstellen Element, Node und EventTarget.
Es gibt aber nur wenige Elemente, die HTMLElement als ihren Konstruktor angeben - die meisten leiten sich von einer der vielen Unterklassen von HTMLElement ab. Eine Liste mit den Zuordnungen von Elementname zu Schnittstelle finden Sie im „Elements“ Anhang der HTML Spezifikation.
Soweit unser Wiki Informationen zu speziellen Element-Interfaces besitzt, sind sie im Folgenden verlinkt.
HTML-Elementobjekt-Unterseiten
HTML-Elementobjekte
Zugriff auf Elementobjekte
Der HTML-Variante des Document Object Models (DOM) zufolge stellt jedes HTML-Element in einer HTML-Datei ein Objekt dar, auf das Sie zugreifen können.
- getElementById(): kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten
- getElementsByName(): kann auf Elemente zugreifen, die einen Namen besitzen (er muss nicht unbedingt eindeutig sein)
- getElementsByTagName(): kann auf alle Elemente zugreifen in der Form: "liefere mir das 27. td-Element im Dokument".
- querySelector(): gibt das erste Element zurück, das dem angegebenen CSS-Selektor entspricht.
- querySelectorAll(): gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen
- parentElement: greift auf das Elternelement eines Elements zu.
Zugriff über spezielle Arrays des document Objekts
In den Anfängen des DOM fehlten die oben beschriebenen Funktionen noch. Statt dessen stellte der Browser die wichtigsten Elemente wie Formulare, Bilder und Links als Arrays zur Verfügung. Die Eigenschaften von document, die diese Arrays lieferten, gibt es heute noch, aber sie liefern kein Array mehr, sondern eine so genannte HTMLCollection.
Diese erlaubt den Zugriff auf ihre Inhalte über die laufende Nummer (z. B. das dritte img-Element im Dokument) , oder über einen Namen (z. B. ein form-Element mit name="suchformular"). Der Name, unter dem das Element zu finden ist, leitet sich von seinem name- oder id-Attribut ab.
Alle Elemente eines Typs befinden sich in einem Array, der den Zugriff über die Elementnummer (z. B. das dritte img-Element im Dokument) oder über ein name-Attribut (z. B. ein form-Element mit name="suchformular") erlaubt. Damit gelingt der Zugriff auf HTML-Elemente am sichersten, aber es können nicht alle Elemente auf diese Weise angesprochen werden.
- document.forms erlaubt den Zugriff auf alle form-Elemente (Formulare).
- document.images erlaubt den Zugriff auf alle img-Elemente (Grafiken).
- document.links erlaubt den Zugriff auf alle a-Elemente, die ein href-Attribut besitzen (Hyperlinks).
