DOM-Manipulation - Knoten überprüfen
1. hasChildNodes
Mit dieser Methode des node
-Objekts kann man überprüfen, ob ein Element bereits über Kindknoten verfügt. Dabei ist
der Rückgabewert entweder ein schlichtes true
oder false
.
<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
// ergibt true
alert (document.getElementById('rahmen').hasChildNodes());
...
<div id="rahmen"></div>
// ergibt false
alert (document.getElementById('rahmen').hasChildNodes());
Leider ist diese Methode nicht sonderlich präzise und daher in vielen Fällen schlicht und ergreifend unzureichend. Gottlob gibt es dazu eine Alternative.
2. childNodes
Dies ist eine Eigenschaft des node
-Objekts. Als Ergebnis erhält man ein Array mit allen vorhandenen
Kindknoten. Allerdings ist dies nur ein eindimensionales Array. Das heißt, dass wenn ein Kindknoten ebenfalls weitere Elemente hat,
diese nicht erfasst werden.
<div id="rahmen"><h1>Überschrift</h1><p>Text 1</p><p>Text 2</p></div>
// Gibt die Anzahl der Kindknoten aus
alert (document.getElementById('rahmen').childNodes.length);
Zeilenumbrüche
Bei der Einführung in das DOM habe ich euch am Ende ja schon darauf hingewiesen, dass laut Spezifikation
bereits ein Zeilenumbruch einen Textknoten darstellt und somit auch von childNodes
erfasst wird. Aber da so was
eigentlich keine Sau interessiert, kann man das zum Beispiel so abfangen:
<div id="rahmen">
<h1>Überschrift</h1>
<p>Text 1</p>
<p>Text 2</p>
</div>
ele = document.getElementById('rahmen');
for (i = 0; i < ele.childNodes.length; i++)
{
if (null != ele.childNodes[i].firstChild)
{
alert (ele.childNodes[i].firstChild.nodeValue);
}
}
Erläuterung
Mit ele.childNodes.length
ermitteln wir die Anzahl von Kindknoten innerhalb des Wurzelelements rahmen
.
Wenn es sich bei dem Knoten um einen Zeilenumbruch oder Leerzeichen handelt, so kann man das mit if (null !=
ele.childNodes[i].firstChild)
ausschließen. Am Ende geben wir dann einfach den entsprechenden Text mittels
ele.childNodes[i].firstChild.nodeValue
aus. Damit greife ich zwar ein wenig vor, da es hier um die Behandlung eines
Textknotens geht, aber die Details dazu kommen im nächsten Abschnitt.
3. nodeType
Durch die unterschiedliche Implementierung des DOM in den einzelnen Browsern muss man manchmal ein wenig in die Trickkiste greifen.
So ist es das ein oder andere Mal notwendig, den Knotentypen zu überprüfen. Und den liefert nodeType
in Form einer
vorgegebenen Zahl. Ich liste hier mal nur die Wichtigsten auf, eine komplette Übersicht gibt es, wie gehabt, bei
SelfHTML.
Zahlencode | Knotenart |
---|---|
1 | Elementknoten |
2 | Attributknoten |
3 | Textknoten |
8 | Kommentarknoten |
9 | Dokumentknoten |
Testet mal das folgende Beispiel in modernen Browsern und dann mit dem IE 8 (falls vorhanden), dann werdet ihr sehen, dass man auch mit nodeType
an das
Problem mit der unterschiedlichen Interpretation von Zeilenumbrüchen herangehen kann.
<div id="rahmen">
<h1>Überschrift</h1>
<p>Text 1</p>
<p>Text 2</p>
</div>
ele = document.getElementById('rahmen');
alert (ele.firstChild.nodeType);
4. tagName
Das ist zwar ursprünglich nur eine proprietäre MS-Erweiterungen gewesen, wird aber mittlerweile von allen gängigen Browsern verstanden. Damit kann man den Typ eines HTML-Elements ermitteln. Aber Obacht. Der Wert wird in Großschreibweise zurückgegeben.
<div id="rahmen"><h1>Überschrift</h1><p>Text 1</p><p>Text 2</p></div>
var ele = document.getElementById('rahmen').childNodes;
for (var i = 0; i < ele.length; i++)
{
alert (ele[i].tagName);
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt