Hauptmenü

Untermenü

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 (0ele.childNodes.lengthi++)
{
  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 0ele.lengthi++)
{
  alert (ele[i].tagName);
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt