節點資源管理器腳本？

Question

我想在瀏覽器中顯示一個DOM節點樹，並帶有可摺疊的子節點。我正在尋找與FireBug的「html」選項卡幾乎相同的功能，只有我希望它在瀏覽器窗口內，並且我希望能夠選擇任意節點作爲根。在我自己寫作之前，我想我會檢查一下，確保沒有人能指向我已經寫好的一個。

Answer 1

我會找螢火蟲精簡版，螢火蟲的一個特殊版本實現了所有的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); 

}