Javascript DOM Nodes

Für Javascript DOM nodes ist jedes HTML-Dokument ein Baum aus allen Elementen: HTML-Tags, Attribute, Texte und Kommentare sind »nodes« oder Knoten.

Die Baumstruktur verbindet nodes – die Knoten – durch Eltern-, Kind- und Nachbar-Beziehungen, so dass Javascript mit DOM-Funktionen und -Eigenschaften durch den Baum navigieren kann und den Weg zu allen Elementen findet.

Javascript DOM-Funktionen in erzeugen neue Knoten und hängen sie an eine beliebige Stelle in den Baum oder entfernen Knoten mit all ihren Kindern.

DOM-Hierarchie.png

Das HTML-Element bildet die Wurzel des Baums und hat zwei Kinder: HEAD und BODY.

HTML ist der parent node von HEAD als auch von BODY.


Die Objekte des DOM besitzen Eigenschaften wie

Die Familienverhältnisse der DOM-Nodes im DOM-Baum

Dieses P-Element hat drei Kinder

<p>Jedes HTML-Dokument <em>ist ein Knotenbaum</em> aus allen Elementen.</p>
PMitEmKnoten.png
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.

Das Formular hat drei Kinder: einen Kommentar-Node und zwei DIV-Nodes. Der erste DIV hat zwei Kinder: LABEL und INPUT. LABEL hat ein Kind: den Text-Node "Suche". 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>
FORM <!-- --> Name eingeben und speichern DIV DIV LABEL INPUT LABEL INPUT Name

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 Child Node seines Element Node.

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 Methode wie document.getElementById.

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 ein Array 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.

51130b81c0694c26bfb8b933905dc657