скрипт проводника узла?

Question

Я хотел бы отобразить дерево узлов DOM в браузере, со свертываемыми дочерними элементами. Мне нужна та же функциональность, что и на вкладке html FireBug, только я хочу ее в окне браузера и хочу выбрать произвольный узел в качестве корневого. Прежде чем писать сам, я решил проверить, чтобы никто не указал мне на уже написанное.

Answer 1

Я бы ознакомился с FireBug Lite, специальной версией FireBug, реализованной полностью на 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);

}