Javascript 节点浏览器脚本？

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

我会检查FireBug Lite，FireBug的一个特殊版本，它全部用Javascript实现，以便在Internet Explorer等劣等浏览器上使用：

---

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

我自己写。它使用jquery（我在下面称之为$jq）

nodeExplorer=function（节点，容器）{//注意：容器必须是jquery对象
$jq（“.nodeExplorerNode”）.live（“单击”，函数（）{
$jq（this）.toggleClass（“崩溃”）；
返回false；
});
if（$jq（“#nodeExplorerStyles”）.length==0）{
$jq（“正文”）。附加(
""+
“.collapped.nodeExplorerNode{”+
“显示：无”+
"}"+
“.collapsed>.减号{”+
“显示：无”+
"}"+
“.collapsed>.plus{”+
“显示：内联”+
"}"+
“.plus{”+
“显示：无”+
"}"+
“.nodeExplorerNode{”+
“光标：指针”+
"}"+
""
)
};
var drawNodes=函数（节点、容器）{
if（节点标记名）{
容器=$jq（“-+”+节点标记名+”）.appendTo（容器）；
}else if（节点数据）{
container.append（“+node.data+”）；
}
对于（var i=0；i

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);

}