Javascript nodeName, nodeType, nodeValue

nodeType, nodeName, nodeValue

nodeName, parentNode und nodeType analysieren die gefundenen Elemente. Habe ich hier mit einem Elementknoten (sprich: ein HTML-Tag) oder einen Textknoten vor mir? Hat der Knoten Kinder und wenn ja, wer sind die Kinder?

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

DOM Nodes und Inhalte

Wenn weder id- noch class-Namen 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. 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.

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ä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.

ullililiCSSHTMLJavascriptidclassattribute nodeattribute nodeelement nodeelement nodeelement nodeelement nodetext nodetext nodetext nodetype 2type 2type 1type 1type 1type 1type 3type 3type 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.

Handelt es nicht nicht um einen Elementknoten, 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>
    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.

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

const 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.