Das DOM – das Mysterium der JavaScript-Welt - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 256

}
.mark{
color:white; background:blue;
}
.l{
display:inline-block;
}
Die interessanten Parts inden wieder in der JavaScript-Datei statt:
Listing 8.55■ Das Skript mit der rekursiven Funktion
function liste(knten) {
var ausgabe;
ausgabe = '<li>';
switch (knten.nodeType) {
case 1 : ausgabe += knten.nodeName + '-Element<br />';
if (knten.hasChildNodes()) {
ausgabe += '<span class="mark">' + knten.childNodes.length +
' Knoten</span>';
}
break;
case 3 : var kntenwert =
knten.nodeValue.replace(/</g, '&lt;').replace(/\n/g, '\\n');
ausgabe += 'Textknoten: ' + kntenwert + '<br />';
break;
case 8 : var kntenwert =
knten.nodeValue.replace(/</g, '&lt;').replace(/\n/g, '\\n');
ausgabe += 'Kommentarknoten: ' + kntenwert + '<br />';
break;
default : ausgabe += 'Knotentyp ' + knten.nodeType + ', Wert: ' +
knten.nodeValue + '<br />';
}
if (knten.hasChildNodes()) {
ausgabe += '\n<ol>\n';
for (var i = 0; i < knten.childNodes.length; i++) {
kntenneu = knten.childNodes[i];
ausgabe += liste(kntenneu); // Rekursion
}
ausgabe += '</ol>\n';
}
ausgabe += '</li>\n';
return ausgabe;
}
window.onload = function() {
var obj = document.getElementsByTagName("body")[0];
document.getElementById('anzeige').innerHTML = liste(obj);
}
Die Funktion liste() ist rekursiv aufgebaut und liefert einen Rückgabewert mit einer Auf-
listung der Knoten in dem als Parameter übergebenen DOM-Objekt. Wir übergeben das
Body-Element in dem Beispiel. In der Funktion werden die einzelnen Knoten in eine Liste
geschrieben. Aufgrund des Knotentyps ( knten.nodeType ) können wir die Art des Knotens
unterscheiden. Bei Textknoten wissen wir ja, dass der Inhalt das erste Kindelement ist bzw.
über nodeValue zur Verfügung steht. Das gilt auch für Kommentarknoten. Bei Elementkno-
ten ist die Anzahl der Kindknoten interessant und die erhalten wir mit childNodes und
dessen Eigenschat length ( knten.childNodes.length ).