HTML DOM ElementObjekt
HTML-DOM-Knoten
Im HTML DOM (Document Object Model) ist allesein Knoten:
- Das Dokument selbst ist ein Dokumentobjekt
- Alle HTML-Elemente sind Elementknoten
- Alle HTML-Attribute sind Attributknoten
- In HTML-Elemente eingefügter Text sind Textknoten
- Kommentare sind Kommentarknoten
Element-Objekt
In HTML DOM,das Element-Objektrepräsentiert ein HTML-Element.
An element object'sKindknoteneines Element-Objekts können Elementknoten, Textknoten oder Kommentarknoten sein.
NodeList ObjectRepräsentiert eine Liste von Knoten, ähnlich einer Sammlung von Kindknoten eines HTML-Elements.
Elemente können Attribute haben. Attribute gehören zu Attributknoten (siehe nächstes Kapitel).
Browser-Unterstützung
Alle gängigen Browser unterstützen das Element-Objekt und das NodeList-Objekt.
Eigenschaften und Methoden
Die oben genannten Eigenschaften und Methoden gelten für alle HTML-Elemente:
| Eigenschaft / Methode | Beschreibung |
|---|---|
| element.accessKey | Legt den accesskey eines Elements fest oder gibt ihn zurück |
| element.addEventListener() | Fügt dem angegebenen Element einen Event-Handler hinzu |
| element.appendChild() | Fügt dem Element ein neues untergeordnetes Element hinzu |
| element.attributes | Gibt ein Array der Attribute eines Elements zurück |
| element.childNodes | Gibt ein Array der untergeordneten Knoten eines Elements zurück |
| element.children | Gibt eine Sammlung der untergeordneten Elemente eines Elements zurück |
| element.classList | Gibt den Klassennamen des Elements als DOMTokenList-Objekt zurück |
| element.className | Legt das class-Attribut eines Elements fest oder gibt es zurück |
| element.clientTop | Stellt die Breite des oberen Rahmens eines Elements in Pixeln dar |
| element.clientLeft | Stellt die Breite des linken Rahmens eines Elements in Pixeln dar |
| element.clientHeight | Gibt die sichtbare Höhe des Inhalts auf der Seite zurück (die Höhe umfasst Padding, aber nicht Rahmen, Außenabstand oder Bildlaufleiste) |
| element.clientWidth | Gibt die sichtbare Breite des Inhalts auf der Seite zurück (die Breite umfasst Padding, aber nicht Rahmen, Außenabstand oder Bildlaufleiste) |
| element.cloneNode() | Klont ein Element |
| element.compareDocumentPosition() | Vergleicht die Dokumentposition zweier Elemente |
| element.contentEditable | Legt fest oder gibt zurück, ob der Inhalt des Elements bearbeitet werden kann |
| element.dir | Legt die Textrichtung eines Elements fest oder gibt sie zurück |
| element.firstElementChild | Gibt das erste untergeordnete Element eines Elements zurück |
| element.firstChild | Gibt den ersten untergeordneten Knoten eines Elements zurück |
| element.focus() | Legt fest, dass ein Dokument oder Element den Fokus erhält |
| element.getAttribute() | Gibt den Attributwert des angegebenen Elements zurück |
| element.getAttributeNode() | Gibt den angegebenen Attributknoten zurück |
| element.getElementsByTagName() | Gibt eine Sammlung aller untergeordneten Elemente mit dem angegebenen Tag-Namen zurück |
| element. getElementsByClassName() | Gibt eine Sammlung aller Elemente mit dem angegebenen Klassennamen im Dokument als NodeList-Objekt zurück |
| element.getFeature() | Gibt das Objekt zurück, das die APIs für das angegebene Feature implementiert |
| element.getUserData() | Gibt ein Objekt aus Schlüssel-Wert-Paaren zurück, das einem Element zugeordnet ist |
| element.hasAttribute() | Gibt true zurück, wenn das angegebene Attribut im Element existiert, andernfalls wird false zurückgegeben |
| element.hasAttributes() | Gibt true zurück, wenn das Element Attribute besitzt, andernfalls gibt es false zurück |
| element.hasChildNodes() | Gibt zurück, ob ein Element Kindelemente hat |
| element.hasFocus() | Gibt einen booleschen Wert zurück, der ermittelt, ob das Dokument oder das Element den Fokus hat |
| element.id | Legt die id eines Elements fest oder gibt sie zurück |
| element.innerHTML | Legt den Inhalt eines Elements fest oder gibt ihn zurück |
| element.insertBefore() | Fügt ein neues Kindelement vor einem vorhandenen Kindelement ein |
| element.isContentEditable | Gibt true zurück, wenn der Inhalt des Elements editierbar ist, andernfalls false |
| element.isDefaultNamespace() | Gibt true zurück, wenn namespaceURI angegeben ist, andernfalls false |
| element.isEqualNode() | Prüft, ob zwei Elemente gleich sind |
| element.isSameNode() | Prüft, ob zwei Elemente denselben Knoten haben |
| element.isSupported() | Gibt true zurück, wenn das angegebene Feature im Element unterstützt wird |
| element.lang | Legt die Sprache eines Elements fest oder gibt sie zurück |
| element.lastChild | Gibt den letzten Kindknoten zurück |
| element.lastElement | Gibt das letzte Kindelement zurück |
| element.matches() | Wenn das Element mit dem angegebenen CSS übereinstimmt, gibt die Methode matches() true zurück, andernfalls false |
| element.namespaceURI | Gibt den Namespace-URI zurück |
| element.nextSibling | Gibt den Knoten zurück, der unmittelbar auf das Element folgt |
| element.nextElementSibling | Gibt das nächste Geschwisterelement des angegebenen Elements zurück (den nächsten Elementknoten auf derselben Ebene des Knotenbaums) |
| element.nodeName | Gibt den Tagnamen des Elements zurück (in Großbuchstaben) |
| element.nodeType | Gibt den Knotentyp des Elements zurück |
| element.nodeValue | Gibt den Knotenwert des Elements zurück |
| element.normalize() | Versetzt das Element in eine "normale" Form, wobei nur Struktur (wie Elemente, Kommentare, Verarbeitungsanweisungen, CDATA-Abschnitte und Entitätsreferenzen) Textknoten trennt, d. h. alle Textknoten unter dem Element (einschließlich Attribute) haben weder benachbarte Textknoten noch leere Textknoten |
| element.offsetHeight | Gibt die Höhe eines beliebigen Elements zurück, einschließlich Rahmen und Innenabstand, aber nicht Außenabstand |
| element.offsetWidth | Gibt die Breite des Elements zurück, einschließlich Rahmen und Innenabstand, aber nicht Außenabstand |
| element.offsetLeft | Gibt den Offset-Container der relativen horizontalen Offset-Position des aktuellen Elements zurück |
| element.offsetParent | Gibt den Offset-Container des Elements zurück |
| element.offsetTop | Gibt den Offset-Container der relativen vertikalen Offset-Position des aktuellen Elements zurück |
| element.ownerDocument | Gibt das Wurzelelement (Dokumentobjekt) des Elements zurück |
| element.parentNode | Gibt den Elternknoten des Elements zurück |
| element.previousSibling | Gibt das unmittelbar vor dem Element liegende Element zurück |
| element.previousElementSibling | Gibt das vorherige Geschwisterelement des angegebenen Elements zurück (den vorherigen Elementknoten auf derselben Ebene des Knotenbaums) |
| element.querySelector() | Gibt das erste untergeordnete Element zurück, das dem angegebenen CSS-Selektor entspricht |
| document.querySelectorAll() | Gibt eine Knotenliste aller untergeordneten Elemente zurück, die dem angegebenen CSS-Selektor entsprechen |
| element.removeAttribute() | Entfernt das angegebene Attribut aus dem Element |
| element.removeAttributeNode() | Entfernt den angegebenen Attributknoten und gibt den entfernten Knoten zurück |
| element.removeChild() | Entfernt ein untergeordnetes Element |
| element.removeEventListener() | Entfernt einen Event-Handler, der durch die addEventListener()-Methode hinzugefügt wurde |
| element.replaceChild() | Ersetzt ein untergeordnetes Element |
| element.scrollHeight | Gibt die Höhe des gesamten Elements zurück (einschließlich der durch Bildlaufleisten verdeckten Teile) |
| element.scrollLeft | Gibt den Abstand zwischen dem linken Rand des tatsächlichen Elements und dem linken Rand der aktuellen Ansicht zurück |
| element.scrollTop | Gibt den Abstand zwischen dem oberen Rand des tatsächlichen Elements und dem oberen Rand der aktuellen Ansicht zurück |
| element.scrollWidth | Gibt die Breite des gesamten Elements zurück (einschließlich der durch Bildlaufleisten verdeckten Teile) |
| element.setAttribute() | Setzt oder ändert das angegebene Attribut und gibt seinen Wert an |
| element.setAttributeNode() | Setzt oder ändert den angegebenen Attributknoten |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | Verknüpft ein Objekt mit dem angegebenen Schlüssel-Wert im Element |
| element.style | Setzt oder gibt das style-Attribut eines Elements zurück |
| element.tabIndex | Setzt oder gibt die Tab-Reihenfolge eines Elements zurück |
| element.tagName | Gibt den Tag-Namen eines Elements als Zeichenfolge zurück (in Großbuchstaben) |
| element.textContent | Legt einen Knoten und seinen Textinhalt fest oder gibt diese zurück |
| element.title | Legt das title-Attribut eines Elements fest oder gibt es zurück |
| element.toString() | Konvertiert ein Element in eine Zeichenfolge |
| nodelist.item() | Gibt den Index eines Elements basierend auf dem Dokumentbaum zurück |
| nodelist.length | Gibt die Anzahl der Knoten in der Knotenliste zurück |