Javascript DOM Nodes

DOM Scripting PULDIVFORMIMGHTMLBODY

Für das Javascript DOM (Document Object Model) sind HTML-Tags, Attribute, Texte und Kommentare »nodes« oder Knoten, die durch eine Baumstruktur miteinander verbunden sind.

Über die Beziehungen wie parentNode – childNode, siblings, nextSiblings erreicht Javascript jedes Element – jeden Knoten – und seine Eigenschaften.

Javascript createElement und cloneNode erzeugen neue Knoten und hängen sie mit replaceChild, insertBefore und appendChild an eine beliebige Stelle in den Baum oder entfernen sie mit removeChild.

DOM Tree Nodes, parentNode, childNode, siblings, nextSibling htmlheadbodytitlemetanavdivformulsectionsectionh1pDas DOM verbindetNodes zu einerBaumstrukturDer DOM-BaumparentNode – childNodeparentNode – childNodenextSiblingsiblings

<html> bildet die Wurzel des Baums und hat zwei Kinder: head und body.

HTML ist parentNode von HEAD und BODY.


DOM-Methoden erreichen bestimmte Elemente z.B. durch

DOM-Baum: Nodes

Dieses P-Element hat drei Kinder

<p>Jedes HTML-Dokument <em>ist ein Knotenbaum</em> aus allen Elementen.</p>
DOM Element Nodes and Text Nodes pJedes HTML-Elementist einaus allen ElementenKnotenbaumem
Das erste Kind ist der Text-Node "Jedes XML-Dokument ", das zweite Kind ist der Element-Node EM und das dritte Kind ist der Text-Node "aus allen Elementen.". Das EM-Element hat ein Kind: den Text-Node "ist ein Knotenbaum". Text-Nodes haben keine Kinder.

DOM-Baum: Formular

Das Formular hat drei childNodes: einen comment Node und zwei DIV-Nodes. Der erste DIV hat zwei Kinder: LABEL und INPUT. LABEL hat ein Kind: den Text-Node "Name". Das zweite DIV hat ein Kind: den Node LABEL, der wiederum auch nur ein Kind, nämlich den Node INPUT hat.

<form id="formdemo" …>
<!-- Name eingeben und speichern -->
<div>
    <label for="name">Name</label> 
    <input type="text" name="name" /> 
</div>
<div>
    <label>
        <input type="submit" value="Speichern" />
    </label>
</div>
</form>
NameSpeichern
DOM Tree Structure Form form<!-- -->divdivlabellabelinputinput

Das sind »nur« die Element- und Text-Nodes eines Fragments des gesamten DOM Tree. Jedes Attribut ist ein Attribute-Node und selbst Weißraum stellt einen DOM Node dar. Ein Attribute Node ist allerdings kein childNode seines Element-Knotens.

Javascript DOM-Navigation

Das id-Attribut der HTML-Tags ist immer wieder ein direkter und schneller Einstieg in den DOM-Baum. Damit ein Javascript nicht immer wieder »von oben herab« den gesamten DOM-Baum durchlaufen muss, gibt es Methoden wie getElementById und querySelectorAll.

Neben document.getElementById() gibt es weitere Funktionen. Die Funktionen greifen äquivalent zu CSS-Selektoren auf die Elemente der HTML-Seite zu.

document.getElementById('formdemo')
Zugriff auf den FORM Node
document.querySelector('#formdemo')
Zugriff auf den FORM Node
document.getElementsByTagName('form') 
Gibt ein Array aller FORM-Elemente zurück
document.querySelectorAll('form')
Gibt eine Sammlung aller FORM-Elemente zurück
document.getElementById('formdemo').firstChild 
gibt einen leeren Text Node zurück – der Zeilenumbruch
document.getElementById('formdemo').firstChild.nextSibling 
gibt <-- Name eingeben und speichern --> zurück
document.getElementById('formdemo').firstElementChild 
gibt den ersten DIV Node zurück
document.getElementsByTagName('input')[0] 
gibt den ersten INPUT Node des Dokuments zurück

Javascript DOM Nodes: Leerraum und Weißraum

Leerraum durch Leerzeichen, Tabulatoren und Zeilenumbrüche erzeugen ebenfalls DOM Nodes. Da man sich auf den HTML-Quelltext nicht verlassen darf, müssen die Rückgaben auf den Node Type geprüft werden.

FORM <!-- --> Name eingeben und speichern DIV DIV LABEL INPUT LABEL INPUT Name

Eine Alternative zu den aufwändigen Abfragen ist Javascript firstElementChild. firstElementChild wird von den modernen Browsern (IE ab Version 9) unterstützt.

Mehr zu DOM nodes