Javascript DOM nodeName, parentNode, nodeValue

DOM Tree structure

Mit parentNode, nextSibling, childNodes navigiert Javascript durch den DOM-Baum. nodeName, parentNode und nodeType analysieren die gefundenen Elemente. Habe ich hier mit einem Elementknoten (spring: ein HTML-Tag) oder einen Textknoten vor mir? Hat der Knoten Kinder und wenn ja, wer sind die Kinder?

Auch wenn kein id- oder class-Attribut einen schnellen Zugriff auf die HTML-Elemente geben, gelangt Javascript über den DOM-Baum und seine Eltern-Kind-Beziehungen zu jedem Knoten und findet jedes HTML-Tag.

Unterwegs oder am Ziel stellen Abfragen sicher, dass die richtigen Elemente gefunden wurden.

  • nodeType
  • nodeName
  • tagName

Inhalt / Wert auslesen

  • nodeValue
  • data
  • textContent

data und tagName fallen aus der Rolle, denn sie sind Eigenschaften von Elementknoten, d.h. der Knoten muss sich einem XML/HTML-Tag zuordnen lassen.

nodeType

nodeType und nodeName stellen sicher, dass der richtige Knoten auch tatsächlich erwischt wurde, denn auf den HTML-Code ist nicht unbedingt Verlass.

element node, attribute node, text node
      +--- attribute node                       text node ---+
      |                                         (Leerraum)   | 
      |                                                      |       
<li class="item"><a href="seite.html">Javascript nodeType</a> </li>
  |               |                             |
  |               |                             +--- text node
  |               |
  |               +--- element node
  |
  +--- element node

Jedes Element, jeder Text, jedes HTML-Attribut und selbst Leerzeichen zwischen zwei HTML-Tags bilden Nodes oder Knoten.

node.nodeType gibt den Typ des Knotens node zurück und ist eine der wichtigesten Analysefunktionen bei der Navigation und Manipulation des DOM-Baums.

if (elem.nodeType == 1) // ein Element-Knoten wie p, a oder div

Javascript DOM kennt 12 nodeTypes, von denen die ersten drei – element_node, attriubte_node und text_node – häuftig gebraucht werden. Die Abfrage nach nodeType soll die Frage beantworten, ob das Script tatsächlich das richtige Objekt erwischt hat.

  • 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

nodeType und nodeName auslesen

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

<table id="myTable" class="small">
if (document.getElementById('myTable').nodeType == 1 && 
  document.getElementById('myTable').nodeName == 'TABLE') {
  … 
}

nodeName gibt bei Elementknoten den Namen des Tags zurück, den Namen des Attributs bei Attributknoten, den Namen eines Entites bei einem Entity oder EntityReference Knoten usw.

nodeName – genauso wie tagName – ist ein String und wird immer in Großbuchstaben zurückgegeben, gleich wie das Element im HTML-Tag geschrieben wurde. Das HTML-Tag <table> liefert einen nodeName TABLE. Alte Versionen von IE, die HTML5 nicht unterstützen, nehmen allerdings nodeName buchstäblich und geben den Namen des Knotens so zurück, wie er im HTML-Code geschrieben ist. <Section> wird als Section geliefert.

Knoten ohne Namen geben eine Stringkonstante zurück: Text => #text, CDATASection => , Comment => #comment, Document => #document und DocumentType =>.

attribute node

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);
}

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

tagName

Javascript tagName gibt den Namen eines Elementknotens node zurück. Im Gegensatz zur allgemeineren Eigenschaft nodeName gibt Javascript tagName nur die Namen von Elementknoten wie DIV, P, IMG usw. zurück, wärend nodeName die Namen aller Knotentypen zurückgibt.

Wenn es sich bei einem Knoten nicht um einen Elementknoten handelt, gibt tagName „undefined“ zurück, während nodeName mit allen Knotentypen klar kommt.

Javascript tag Name
Ein Bild, ein Text, ein Kommentar

Fly me to the moon

mit einem HTML-Kommentar

<div id="analyse">
    <img src="fly-me-to-the-moon.svg">
    <h5>Ein Bild, ein Text, ein Kommentar</h5>
    <p>Fly me to the moon</p>
    <!-- einen Kommentar -->
    <p>mit einem HTML-Kommentar</p>
</div>


<script type="text/javascript">
    var analyse = document.getElementById('analyse');
    var allNodes = analyse.childNodes;
    var text = "";
    for (var i=0; i<allNodes.length; i++) {
        text = text + allNodes[i].tagName + " " + 
        allNodes[i].nodeName + "<br />";
    }
</script> 

data

Jacascript node.data gibt den Inhalt eines Textknotens node zurück.

Etwas Text mit einem Link steht hier.

Der Link innerhalb des p-Tags gehört nicht mehr zum Textknoten, sondern bildet natürlich schon wieder einen eigenständigen Kind-Knoten.

<p id="jsdomData">
   Etwas Text mit einem <a href="DOM-Neue-Knoten.html">Link</a> steht hier.
</p>
var jsdomData = document.getElementById('jsdomData');
if (jsdomData.firstChild.nodeType == "3") {
   alert(jsdomData.firstChild.data);
}

nodeValue

Javascript nodeValue gibt Inhalt eines Textknotens oder den Wert eines Attributknotens node zurück. nodeValue ist allgemeiner als die Eigenschaft data, die nur auf Textknoten angewendet werden kann.

<button id="thisButton" 
   style="background: silver; border: 1px solid gray" 
   class="someButton">nodeValue anzeigen</button>

Das Skript analysiert die Attributknoten des button-Tags und sammelt seine Attribute im Array attList. Der Block der for-Anweisung schreibt die Namen und den nodeValue jedes Attributs in die Variable text, die am Ende ausgegeben wird.

Wo ist der Text des button-Tags? button ist kein Textknoten, sondern ein Elementknoten.

var jsdomValue = document.getElementById('thisButton');
var attList = jsdomValue.attributes;
var text = "";
for (var i=0; i<attList.length; i++) {
   text += attList[i].name + ": " + attList[i].nodeValue + "\n";
}
alert(text);