node explorer script?

Question

I'd like to display a DOM node tree in a browser, with collapsable children. I'm looking for pretty much the same functionality as FireBug's "html" tab, only I want it within the browser window, and I want to be able to choose an arbitrary node as the root. Before I write it myself, I figured I'd check to make sure no one can point me toward an already-written one.

Answer 1

I'd check out FireBug Lite, a special version of FireBug implemented all in Javascript so as to be usable on inferior browsers like Internet Explorer: http://www.getfirebug.com/lite.html

It's almost exactly what you want (I think), and even if it isn't it should be close enough to give you something to start from.

Answer 2

Wound up writing my own. It uses jquery (which I refer to below as $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);

}