Javascript nodeName, nodeType, nodeValue

DOM Nodes und Inhalte

Mit nextSibling, previousSibling, firstChild und lastChild erreicht Javascript jedes Element. Aber das sind alte Methoden des DOM, die auch Textknoten, Leerzeichen und Kommentare einsammeln.

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.

      ┌─── 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äufiger gebraucht werden. Die restlichen Node-Typen werden eher für die Verarbeitung von XML gebraucht. 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

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">

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
• DocumentType =>.

attribute node

Die Attribut-Knoten eines Elements sind eine Liste.

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

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

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

Javascript enthält Methoden und Eigenschaften, um Attribute zu lesen, zu ändern, zu löschen und um neue Attribute in einen Elementknoten zu setzen.

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.

Handelt es nicht nicht um einen Elementknoten, gibt tagName undefined zurück, während nodeName mit allen Knotentypen klar kommt.

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>
    let analyse = document.getElementById('analyse');
    let allNodes = analyse.childNodes;
    let text = "";
    for (let i=0; i<allNodes.length; i++) {
        text = text + allNodes[i].tagName + " " + 
        allNodes[i].nodeName + "<br />";
    }
</script> 

node.data

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

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="foo">
   Etwas Text mit einem <a href="DOM-Neue-Knoten.html">Link</a> steht hier.
</p>

let foo = document.getElementById('foo');
if (foo.firstChild.nodeType == "3") {
   console.log (foo.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 Attribute von button und sammelt sie in attList.

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

Wo ist der Text des button-Tags? button ist kein Textknoten, sondern ein Elementknoten. Fast immer ist innerHTML die einfachste Lösung, um den Text eines Elements auszulesen.