script d'exploration de noeud?

Question

Je souhaite afficher un arbre de noeud DOM dans un navigateur, avec des enfants pouvant être réduits. Je cherche à peu près la même fonctionnalité que l'onglet "html" de FireBug, seulement je le veux dans la fenêtre du navigateur, et je veux être capable de choisir un nœud arbitraire comme racine. Avant de l'écrire moi-même, je me suis dit que je vérifierais pour m'assurer que personne ne peut me diriger vers un texte déjà écrit.

Answer 1

Je vérifierais sur Firebug Lite, une version spéciale de Firebug mis en œuvre tout en Javascript pour être utilisable sur les navigateurs inférieurs comme Internet Explorer: http://www.getfirebug.com/lite.html

Il est presque exactement ce que vous voulez (je crois), et même si ce n'est pas le cas, il devrait être assez proche pour vous donner quelque chose à partir de quoi.

Answer 2

Blessée en train d'écrire la mienne. Il utilise jquery (que je désignerai ci-dessous par $ jq).

nodeExplorer = function(node, container){ // note: container must be a jquery object 


    $jq(".nodeExplorerNode").live("click", function(){ 
     $jq(this).toggleClass("collapsed"); 
     return false; 
    }); 

    if($jq("#nodeExplorerStyles").length == 0){ 

     $jq("body").append(
      "<style id='nodeExplorerStyles'>"+ 
       ".collapsed .nodeExplorerNode{"+ 
        "display:none" + 
       "}"+ 
       ".collapsed>.minus{"+ 
        "display:none" + 
       "}"+ 
       ".collapsed>.plus{"+ 
        "display:inline" + 
       "}"+ 
       ".plus{"+ 
        "display:none" + 
       "}"+ 
       ".nodeExplorerNode{"+ 
        "cursor: pointer" + 
       "}"+ 
      "</style>" 
     ) 

    }; 

    var drawNodes = function(node, container){ 
     if(node.tagName){ 
      container = $jq("<div style='margin-left: 20px' class='collapsed nodeExplorerNode'><span class='minus'>- </span><span class='plus'>+ </span>"+ node.tagName +" </div>").appendTo(container); 
     }else if(node.data){ 
      container.append("<b>" + node.data + "</b>"); 
     } 
     for(var i=0; i< node.childNodes.length; i++){ 
      drawNodes(node.childNodes[i], container)  
     } 
    } 

    drawNodes(node, container); 

}