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