Javascript nodeName und nodeType – Knotentypen

nodeType und nodeName stellen sicher, dass der richtige Knoten auch tatsächlich erwischt wurde, denn auf den HTML-Code 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.attributes – Liste 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.

ELEMENT_NODE
1
ATTRIBUTE_NODE
2
TEXT_NODE
3
CDATA_SECTION_NODE
4
ENTITY_REFERENCE_NODE
5
ENTITY_NODE
6
PROCESSING_INSTRUCTION_NODE
7
COMMENT_NODE
8
DOCUMENT_NODE
9
DOCUMENT_TYPE_NODE
10
DOCUMENT_FRAGMENT_NODE
11
NOTATION_NODE
12

<table id="myTable" 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('myTable').nodeType == 1 && 
  document.getElementById('myTable').nodeName == 'TABLE') {
  … 
}

Die Attribut-Knoten eines Elements sind eine Liste.

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

for (var i = 0; i<atts; i++) {
	console.log (myTable.attributes.item(i).nodeName + ' ' + myTable.attributes.item(i).nodeValue);
}

DOM Attributknoten

Attributknoten sind etwas 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.

ul li li li CSS HTML Javascript id class attribute node attribute node element node element node element node element node text node text node text node type 2 type 2 type 1 type 1 type 1 type 1 type 3 type 3 type 3

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.