节点资源管理器脚本？

Question

我想在浏览器中显示一个DOM节点树，并带有可折叠的子节点。我正在寻找与FireBug的“html”选项卡几乎相同的功能，只有我希望它在浏览器窗口内，并且我希望能够选择任意节点作为根。在我自己写作之前，我想我会检查一下，确保没有人能指向我已经写好的一个。

Answer 1

我会找萤火虫精简版，萤火虫的一个特殊版本实现了所有的Javascript，以便对下的浏览器，如Internet Explorer使用： http://www.getfirebug.com/lite.html

它几乎正是你想要的（我认为），即使它不是，它应该足够接近，让你从一开始。

Answer 2

伤了写我自己的。它使用jQuery（我在下面称之为$ 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); 

}