roteiro explorador nó?

votos
2

Eu gostaria de mostrar uma árvore de nós DOM em um navegador, com as crianças dobráveis. Eu estou olhando para praticamente a mesma funcionalidade que guia html do Firebug, só que eu quero isso na janela do navegador, e eu quero ser capaz de escolher um nó arbitrário como a raiz. Antes de eu escrever isso, eu percebi que eu iria verificar para se certificar de que ninguém pode me apontar na direção de uma que já está escrito.

Publicado 19/05/2009 em 15:07
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

Eu confira Firebug Lite, uma versão especial do FireBug implementado tudo em Javascript, de modo a ser utilizável em navegadores inferiores, como o Internet Explorer: http://www.getfirebug.com/lite.html

É quase exatamente o que você quer (eu acho), e até mesmo se não é ele deve estar perto o suficiente para dar-lhe alguma coisa para começar.

Respondeu 20/05/2009 em 00:48
fonte usuário

votos
0

Acabou de escrever a minha própria. Ele usa jQuery (que me refiro abaixo quanto $ 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);

}
Respondeu 21/05/2009 em 19:32
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more