HTML DOM Element-Objekt

Das Element-Objekt

In HTML DOM repräsentiert das Element-Objekt HTML-Elemente wie P, DIV, A, TABLE oder andere HTML-Elemente.

Attribute und Methoden

Die folgenden Attribute und Methoden sind für alle HTML-Elemente gültig:

Attribute / Methode Beschreibung
accessKey Setzen oder geben Sie den Wert des accesskey-Attributs des Elements zurück.
addEventListener() Fügen Sie einen Event-Handler dem Element hinzu.
appendChild() Fügen Sie einem Element neue Kindknoten hinzu (anhängen).
attributes Geben Sie die NamedNodeMap der Attribute des Elements zurück.
blur() Entfernen Sie den Fokus aus dem Element.
childElementCount Geben Sie die Anzahl der Kindelemente des Elements zurück.
childNodes Geben Sie die NodeList der Kindknoten des Elements zurück.
children Geben Sie die HTMLCollection der Kindelemente des Elements zurück.
classList Geben Sie den Klassennamen des Elements zurück.
className Setzen oder geben Sie den Wert der class-Attribut des Elements zurück.
click() Simulieren Sie einen Mausklick auf das Element.
clientHeight Geben Sie die Höhe des Elements zurück, einschließlich der Innenabstände.
clientLeft Geben Sie die Breite der linken Rahmenkante des Elements zurück.
clientTop Geben Sie die Breite der oberen Rahmenkante des Elements zurück.
clientWidth Geben Sie die Breite des Elements zurück, einschließlich der Innenabstände.
cloneNode() Klonen Sie ein Element.
closest() Suchen Sie im DOM-Baum nach dem nächsten Element, das mit dem CSS-Selektor übereinstimmt.
compareDocumentPosition() Vergleicht die Dokumentpositionen zweier Elemente.
contains() Gibt true zurück, wenn der Knoten ein Nachkommen des Knotens ist.
contentEditable Setzt oder gibt den Wert, ob der Inhalt des Elements editierbar ist, zurück.
dir Setzt oder gibt den Wert der dir-Eigenschaft des Elements zurück.
firstChild Gibt den ersten Kindknoten des Elements zurück.
firstElementChild Gibt den ersten Kindelementknoten des Elements zurück.
focus() Lässt das Element in den Fokus gelangen.
getAttribute() Gibt den Wert der Eigenschaft des Elements zurück.
getAttributeNode() Gibt den Attributknoten zurück.
getBoundingClientRect() Gibt die Größe des Elements und seine Position im Verhältnis zum Viewport zurück.
getElementsByClassName() Gibt eine Sammlung von Kindelementen mit der angegebenen Classname zurück.
getElementsByTagName() Gibt eine Sammlung von Kindelementen mit der angegebenen Tagname zurück.
hasAttribute() Gibt true zurück, wenn das Element die angegebene Eigenschaft hat.
hasAttributes() Gibt true zurück, wenn das Element jede Eigenschaft hat.
hasChildNodes() Gibt true zurück, wenn das Element jeden Kindknoten hat.
element.id Setzt oder gibt den Wert der id-Eigenschaft des Elements zurück.
innerHTML Setzt oder gibt den Inhalt des Elements zurück.
innerText Den Textinhalt des Knotens und seiner Nachkommen setzen oder zurückgeben.
insertAdjacentElement() Fügt ein neues HTML-Element an einer relativen Position des Elements ein.
insertAdjacentHTML() Fügt HTML-Text an einer relativen Position des Elements ein.
insertAdjacentText() Fügt Text an einer relativen Position des Elements ein.
insertBefore() Fügt einen neuen Kindknoten vor einem bestehenden Kindknoten ein.
isContentEditable Gibt true zurück, wenn der Inhalt des Elements editierbar ist.
isDefaultNamespace() Gibt true zurück, wenn der angegebene namespaceURI der Standardwert ist.
isEqualNode() Prüft, ob zwei Elemente identisch sind.
isSameNode() Prüft, ob zwei Elemente denselben Knoten sind.
isSupported() Veraltet.
lang Setzt oder gibt den Wert der lang-Eigenschaft des Elements zurück.
lastChild Gibt den letzten Kindknoten des Elements zurück.
lastElementChild Rückgabe des letzten untergeordneten Elements des Elements.
matches() Rückgabe von true, wenn das Element mit dem angegebenen CSS-Selektor übereinstimmt.
namespaceURI Rückgabe des Namensraums URI des Elements.
nextSibling Rückgabe des nächsten Nodes auf der gleichen Knoten-Ebene.
nextElementSibling Rückgabe des nächsten Elements auf der gleichen Knoten-Ebene.
nodeName Rückgabe des Namens des Knotens.
nodeType Rückgabe des Knotentyps des Knotens.
nodeValue Setzen oder Rückgabe des Wertes eines Knotens.
normalize() Kombinieren von benachbarten TextNodes innerhalb eines Elements und Entfernen leerer TextNodes.
offsetHeight Rückgabe der Höhe des Elements einschließlich Innenabständen, Rändern und Scrollbalken.
offsetWidth Rückgabe der Breite des Elements einschließlich Innenabständen, Rändern und Scrollbalken.
offsetLeft Rückgabe der horizontalen Auswirkungsposition des Elements.
offsetParent Rückgabe des Auswirkungsbehälters des Elements.
offsetTop Rückgabe der vertikalen Auswirkungsposition des Elements.
outerHTML Setzen oder Rückgabe des Inhalts eines Elements (einschließlich Start- und End-Tags).
outerText Setzen oder Rückgabe des externen Textinhalts von Knoten und ihren Nachkommen.
ownerDocument Rückgabe des Wurzelelements (Dokumentobjekt) des Elements.
parentNode Rückgabe des übergeordneten Nodes des Elements.
parentElement Rückgabe des übergeordneten Elements des Elements.
previousSibling Rückgabe des vorherigen Nodes auf der gleichen Knoten-Ebene.
previousElementSibling Rückgabe des vorherigen Elements auf der gleichen Knoten-Ebenen.
querySelector() Rückgabe des ersten untergeordneten Elements, das mit dem CSS-Selektor übereinstimmt.
querySelectorAll() Rückgabe aller untergeordneten Elemente, die mit dem CSS-Selektor übereinstimmen.
remove() Entfernen eines Elements aus dem DOM.
removeAttribute() Entfernen eines Attributes aus einem Element.
removeAttributeNode() Entfernen eines AttributNodes und Rückgabe des entfernten Nodes.
removeChild() Entfernen eines Unter节点 aus einem Element.
removeEventListener() Entfernen des bereits mit addEventListener() hinzugefügten Ereignisbehandlers.
replaceChild() Ersetzen der Unter节点 eines Elements.
scrollHeight Rückgabe der Gesamthöhe eines Elements einschließlich der Innenabstände.
scrollIntoView() Das Element in den sichtbaren Bereich des Browserfensters rollen.
scrollLeft Den Wert der Property scrollLeft des Elements setzen oder zurückgeben, der die Anzahl der Pixel angibt, um horizontal zu rollen.
scrollTop Den Wert der Property scrollTop des Elements setzen oder zurückgeben, der die Anzahl der Pixel angibt, um vertikal zu rollen.
scrollWidth Die gesamte Breite des Elements zurückgeben, einschließlich der Innenabstände.
setAttribute() Den Wert der Attribute setzen oder ändern.
setAttributeNode() Den Attributknoten setzen oder ändern.
style Den Wert der Property style des Elements setzen oder zurückgeben.
tabIndex Den Wert der Property tabIndex des Elements setzen oder zurückgeben.
tagName Den Tag-Namen des Elements zurückgeben.
textContent Den Textinhalt des Knotens und seiner Nachkommen setzen oder zurückgeben.
title Den Wert der Property title des Elements setzen oder zurückgeben.
toString() Element in einen String umwandeln.

Detaillierte Erklärung des Element-Interfaces

Das Element-Interface stellt HTML-Elemente, XML-Elemente oder Tags dar. Die Property tagName gibt den Namen des Elements an. Das Attribut documentElement des Dokuments verweist auf das Wurzelelement dieses Dokuments. Das Attribut body des HTMLDocument-Objekts verweist ebenfalls auf das <body>-Element des Dokuments. Um ein Element mit einer bestimmten Bezeichnung in einem HTML-Dokument zu finden, wird Document.getElementById() verwendet (und dem Element ein einzigartiger Name über das id-Attribut vergeben). Um Elemente durch das Tag-Name zu lokalisieren, wird getElementsByTagName() verwendet, was sowohl eine Methode des Elements als auch des Dokuments ist. In einem HTML-Dokument kann auch die Methode HTMLDocument.getElementsByName() verwendet werden, um Elemente basierend auf dem name-Attribut zu finden. Schließlich kann mit der Methode Document.createElement() ein neues Element-Element in das Dokument eingefügt werden.

Die Methode addEventListener() (und ihre spezifische IE-Ersatzmethode attachEvent()) bietet die Möglichkeit, eine Ereignisbehandlungsfunktion für einen bestimmten Ereignistyp auf diesem Element zu registrieren. Technisch gesehen sind addEventListener(), removeEventListener() und dispatchEvent() durch das EventTarget-Interface der 2. DOM Events-Spezifikation definiert. Alle Element-Objekte implementieren das EventTarget.

Die verschiedenen anderen Methoden dieses Interfaces bieten den Zugriff auf die Attribute des Elements. In HTML-Dokumenten (und vielen XML-Dokumenten) haben alle Attribute einfache String-Werte, und Sie können die einfachen Methoden getAttribute() und setAttribute() verwenden, um jede erforderliche Attributoperation durchzuführen.

Wenn Sie ein XML-Dokument verwenden, kann es Entity-Referenzen als Teil der Attributwerte enthalten. Sie müssen den Attr-Objekt und seinen Knotenbaum verwenden. Sie können den Attr-Objekt mit getAttributeNode() und setAttributeNode() abrufen und setzen oder die Attr-Knoten durch das attributes[]-Array im Node-Interface durchsuchen. Wenn Sie ein XML-Dokument mit XML-Namensraum verwenden, müssen Sie die Methoden mit dem Präfix "NS" verwenden.

Im 1. DOM-Standard ist die normalize()-Methode ein Teil des Element-Interfaces. Im 2. Standard ist normalize() ein Teil des Node-Interfaces. Alle Elementknoten erben diese Methode und können sie weiterhin verwenden.

Wissenswertes: HTML DOM Knoten

Im HTML DOM (Dokumentobjektmodell) ist jeder Teil ein Knoten:

  • Das Dokument selbst ist ein Dokumentknoten
  • Alle HTML-Elemente sind Elementknoten
  • Alle HTML-Attribute sind Attributknoten
  • Der Text im HTML-Element ist ein Textknoten
  • Kommentare sind Kommentarknoten

Das Element-Objekt

Im HTML DOM wird das Element-Objekt für HTML-Elemente verwendet.

Das Element-Objekt kann Unter knoten mit dem Typ Knoten, Textknoten, Kommentarknoten haben.

Das NodeList-Objekt stellt eine Knotenliste dar, z.B. die Sammlung der Unter knoten von HTML-Elementen.

Elemente können ebenfalls Attribute haben. Attribute sind Attributknoten (siehe das nächste Kapitel).