CSS, HTML und Javascript mit {stil}

Javascript DOM Nodes – Knotentypen

DOM Core stellt das Dokument als eine Hierarchie von Knoten dar und weist den verschiedenen Knotenarten Eigenschaften und Methoden zu.

Mit einer Abfrage des nodeType kann ein Javascript sicherstellen, dass der richtige Knoten auch tatsächlich erwischt wurde, denn auf das XML/HTML-Markup ist nicht unbedingt Verlass.

Das Mutterschiff aller Knoten des DOM-Baums ist document, das oberste Objekt des Dokumentenbaums, der DOCUMENT-Knoten.

Die wichtigsten Informationen zu einem Knoten sind:

  • node.nodeType – der numerische Wert eines Knotens. Für das alltägliche Javascript reichen drei Knotentypen: ELEMENT_NODE (1), ATTRIBUTE_NODE (2) und TEXT_NODE (3).
  • node.nodeName – der Name des Knotens, z.B. 'a' für ein a-Tag oder 'img' für ein img-Tag
  • node.nodeAttributes – Array der Attribute, z.B. das action-Attribut in einem Formular oder das style-Attribut in einem div-Tag.
  • node.nodeValue – Zugriff auf den Inhalt eines Knotens

Mit Javascript nodeType und nodeName kann eine zusätzliche Sicherung in das Script eingebaut werden. Gerade bei der Navigation durch den DOM-Baum führen die Inkonsistenzen der Browser zu Fehlern – so machen z.B. der Leerraum zwischen Tags und Zeilenumbüche die Navigation mit nextSibling oder previousSibling schnell zum Irrweg.

Tabelle nodeType
ELEMENT_NODE1PROCESSING_INSTRUCTION_NODE7
ATTRIBUTE_NODE2COMMENT_NODE8
TEXT_NODE3DOCUMENT_NODE9
CDATA_SECTION_NODE4DOCUMENT_TYPE_NODE10
ENTITY_REFERENCE_NODE5DOCUMENT_FRAGMENT_NODE11
ENTITY_NODE6NOTATION_NODE12

<table id="nodeTypeTable" class="small">

Wollen wir also z.B. wissen, ob das Script die richtige Tabelle erreicht hat, können wir den nodeType und nodeName des aktuellen Elements abrufen:

if (document.getElementById('nodeTypeTable').nodeType == 1 && 
  document.getElementById('nodeTypeTable').nodeName == 'TABLE') {
  …
}

Die Attribut-Knoten eines Elements sind ein Array.

var myTable = document.getElementById('nodeTypeTable');
var atts = myTable.attributes.length;

for (var i = 0; i<atts; i++) {
	console.log (myTable.attributes[i].nodeName);
}

DOM Attributknoten

Attributknoten sind etwas ganz Besonderes. Sie treten im Baum nicht als Knoten auf, sind auch keine Kinder von Elementknoten, sondern Eigenschaften eines Elementknotens.

Auch für Attributknoten gibt es in Javascript Methoden und Eigenschaften, um Attribute zu lesen, zu ändern, zu löschen und um neue Attribute in einen Elementknoten zu setzen.

DOM-Inspektoren

So weit die Theorie, denn ganz so einfach ist die Obsternte im Knotenbaum nicht. Heute müssen Script nicht nur funktionieren – Besucher verlangen nach schnellen Anwendungen.

Durch das zunehmende Interesse an Javascript in den letzten Jahren gibt es sehr gute Tools für die Entwicklung und das Debuggen von Javascript.

Hilfe bei der Fehlersuche im DOM-Baum bieten die Browser-Consolen von Firefox, Chrome und Safari.