molily Navigation

JavaScript/DOM: Rekursive Auflistung aller Kindknoten

Dieses Script durchläuft den DOM-Objektbaum des HTML-Dokuments und gibt alle Kindknoten eines Elements aus. Es wurde ab Mozilla 0.9, Internet Explorer 5.0 und Opera 7.0 Beta getestet. Mozilla und Opera 7 erachten im Gegensatz zum Internet Explorer Zeilenumbrüche (newlines bzw. carriage returns) als eigene Textknoten.

Interessant in diesem Kontext ist auch Ian Hicksons Live DOM Viewer.

Der Scriptcode

function liste_unterknoten (knoten) {
    var ausgabe;
    ausgabe = '<li>';
    switch (knoten.nodeType) {
        case 1 :
            ausgabe += '<strong>' + knoten.nodeName + '<\/strong>-Element';
            if (knoten.hasChildNodes()) {
                ausgabe += ', ' + knoten.childNodes.length + ' Unterknoten';
            }
            break;
        case 3 :
            var knotenwert = knoten.nodeValue.replace(/</g, '&lt;').replace(/\n/g, '\\n');
            ausgabe += 'Textknoten: [<strong>' + knotenwert + '<\/strong>]';
            break;
        case 8 :
            var knotenwert = knoten.nodeValue.replace(/</g, '&lt;').replace(/\n/g, '\\n');
            ausgabe += 'Kommentarknoten: [' + knotenwert + ']';
            break;
        default :
            ausgabe += 'Knoten des Typs ' + knoten.nodeType +
                ', Wert: [' + knoten.nodeValue + ']';
    }
    if (knoten.hasChildNodes()) {
        ausgabe += '\n<ol>\n';
        for (var i = 0; i < knoten.childNodes.length; i++) {
            knotenneu = knoten.childNodes[i];
            ausgabe += liste_unterknoten(knotenneu); // Rekursion
        }
        ausgabe += '</ol>\n';
    }
    ausgabe += '</li>\n';
    return ausgabe;
}

Es wird beispielhaft nach dem vollständigen Laden des Dokuments mit dem html-Element als Anfangsknoten gestartet. Die produzierte Ausgabe wird mit innerHTML in ein ol-Element geschrieben (mit der ID anzeige).

window.onload = function () {
    var obj = document.documentElement;
    var ausgabe = liste_unterknoten(obj);
    document.getElementById('anzeige').innerHTML = ausgabe;
};

Beispielausgabe

Letzte Änderung: 03.02.2006