Question

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

Answer 1

我会查看FireBug Lite，这是一个在Javascript中实现的FireBug的特殊版本，以便在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);

}

节点资源管理器脚本？

2 个答案: