CSS, HTML UND JAVASCRIPT MIT {STIL}

Zeilenumbrüche können als neuer Knoten gelesen werden. Beim Auslesen von Klassen immer bedenken, dass ein HTML-Tag mehrere Klassen in einem Klassen-Attribut enthalten kann. Der Weg zum kleinen Knoten unten am Ende des Baums birgt jede Menge morscher Äste.

childNodes

Jacascript childNodes gibt ein Array aller Kindknoten von node zurück.

---

<div id="jsdomThisDiv">
<p>Dieses DIV-Element enthält ein P-Element und einen Kommentar</p>
<!-- einen Kommentar -->
<p>und ein Bild von Kong</p>
<img src="kong.jpg" width="152" height="145" alt="kong.jpg" />
</div>

Das Skript sammelt alle Kindknoten des Elements mit der id jsdomThisDiv in ein Array elems. Der Block der for-Anweisung schreibt den Knotennamen jedes Kindknotens in die Stringvariable text, die am Ende ausgegeben wird.

var thisElem = document.getElementById('jsdomThisDiv');
var elems = thisElem.childNodes; 
var text = ""; 
for (var i=0; i<elems.length; i++) {
   text = text + elems[i].nodeName + "\n";
}
alert (text);

parentNode

Javascript parentNode gibt den Elternknoten von node zurück.

Sag mal Kleiner, wer sind denn deine Eltern?

<p id="jsdomP">Sag mal Kleiner, wer sind denn deine Eltern?</p>

Das HTML p-Tag wird nach dem Laden des Dokuments anhand seines id-Attributs identifiziert. Der Event Handler onclick aktiviert die Ausgabe, wenn das P-Element mit der Maus angeklickt wird.

var jsdomP = document.getElementById('jsdomP'); 
jsdomP.onclick = function() {
   alert("parentNode ist " + this.parentNode.nodeName + "\n" + 
         "parentNode vom parentNode ist " + 
         this.parentNode.parentNode.nodeName);
   return false;
}

hasChildNodes

Javascript hasChildNodes gibt true zurück, wenn node Kindknoten hat und false, wenn der Knoten node keine Kindknoten hat.

<div id="jsdomHC"></div>

Kinder?

Das Skript prüft mit der Eigenschaft hasChildNodes von node, ob der Knoten mit der id jsdomHC Kinder hat.

var node = document.getElementById('jsdomHC');
if (node.hasChildNodes == true) {
   alert(node.nodeName + " hat Kindknoten");
} else {
   alert(node.nodeName + " hat keine Kinder");
}

firstChild

Javascript firstChild gibt den ersten Kindknoten von node zurück

---

<img id="jsdomFC" src="kong.jpg" width="152" height="145" alt="kong.jpg" />

Erstes Kind anzeigen

Das Skript prüft zuerst, ob ein Element mit der ID jsdomFC existiert und falls das Element existiert, ob das Element Kindknoten hat. Wenn das Element tatsächlich Kindknoten hat, gibt das Skript den Namen des Kindknotens aus.

function showFirstChild()
{
   if (document.getElementById('jsdomFC')) {
      var jsdomFC = document.getElementById('jsdomFC');
      if (jsdomFC.hasChildNodes == true) {
         alert(jsdomFC.firstChild.nodeName);
      } else {
         alert(jsdomFC.nodeName + " hat keine Kindknoten");
      }
   } else {
      alert ("Element existiert nicht");
   }
}

lastChild

Javascript lastChild gibt den letzten Kindknoten von node zurück

• Montag
• Dienstag
• Mittwoch

<ul id="thisUl"><li>Montag</li><li>Dienstag</li><li>Mittwoch</li></ul>

Letztes Kind anzeigen

Das Skript prüft, ob der Knoten mit der id thisUl Kindknoten hat (if (node.hasChildNodes))und wenn ja, dann gibt das Skript den Namen des letzten Kindknotens aus: node.lastChild.nodeName. Das letzte LI-Element erwischt das Skript aber nur zuverläßig, weil die Tags des UL-Elements ohne Leerraum in einer Zeile stehen.

function showLast()
{
   if (document.getElementById('thisUl')) {
      var node = document.getElementById('thisUl');
      if (node.hasChildNodes) {
         alert('Letzes Kind ' + node.lastChild.nodeName);
      } else {
         alert(node.nodeName + ' hat keine Kindknoten');
      }
   } else {
      alert ( "Ein Element mit der ID thisUl existiert nicht." ); 
   }
}

nextSibling

Javascript nextSibling gibt den nächsten Knoten auf derselben Ebene zurück – einen Knoten, der am selben Elternknoten wie node hängt.

• Montag
• Dienstag
• Mittwoch

<ul id="thisUl2">
   <li>Montag</li>
   <li>Dienstag</li>
   <li>Mittwoch</li>
</ul>

nextSibling anzeigen

Das Skript prüft, ob das Element mit der id thisUl2 Kindknoten hat, und wenn ja, setzt die Anweisung node = node.firstChild die Variable node auf das erste Kind des Knotens – am Anfang also auf den ersten Kindknoten des UL-Elements. Solange es einen nextSilbling gibt (while (node.nextSibling)), setzt der Block der while-Schleife die Variable einen Sibling weiter: node = node.nextSibling;.

function showNextSibling()
{
   var node = document.getElementById('thisUl2');
   var text = '';
   if (node.hasChildNodes) {
      node = node.firstChild;    
      while (node.nextSibling) {
         text = text + node.nodeName + ' '; 
         node = node.nextSibling;
      }
   } else {
      text = 'Knoten ' + node.nodeName + ' hat keine Kinder';
   }
   alert(text);
   return false; 
}

previousSibling

Javascript previousSibling gibt den vorangehenden Knoten auf derselben Ebene zurück – einen Knoten, der am selben Elternknoten wie node hängt.