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 & lt; 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