Javascript HTML节点映射生成器？

好的，我要寻找的是能够生成网页节点的图形树样式的映射的东西

所以从理论上讲，它可以改变这样的东西：

<aside id="leftCol">
    <section class="container"> 
        <header class="child1">
            <hgroup>
                <h1 class="title">Demo Project</h1>
                <h3 class="subTitle">WEBSITE 2011</h3>
            </hgroup>
        </header>

        <div class="child2" id="thisDiv">
            <div class="subChild1">
                <div class="anotherChild1"></div>
                <div class="anotherChild2"></div>
                <div class="anotherChild3"></div>
            </div>

            <div class="subChild2">
                <p>Some Text</p>
            </div>   
        </div>

        <footer class="child3">                  
            <a href="#">Link to project here</a>
        </footer>
    </section>
</aside>        

（这当然会在HTML和BODY标记中，但为了示例起见，我将使用公文包页面中的一个片段和一些生成的文本）

变成类似于：

这里面绝对没有设计思想，所以不要批评它，纯粹是为了举例。我在photoshop中快速制作了这张图片，只是为了准确地说明我在说什么。大部分情况下，所有这些都可以通过CSS轻松生成。它不一定是这样的图形，但为了让我感到无聊，它是这样的

---

我正在寻找一个插件或一个软件，可以为我做到这一点。我更希望它能以HTML或图像的形式生成这张地图。我想任何类型的地图都可以，只要它容易理解

作为最后手段，如果我找不到我想要的东西，我可能会自己写。如果真是这样，我很乐意找一些人来帮助编写插件。

是一个很好的工具

您可以使用一段Javascript生成Graphviz文件，并使用该工具生成png

javascript应该递归地访问所有元素，为每个元素生成唯一的ID，并以相当容易理解的Graphviz格式将它们写出

javascript:void((function() {var f = function(pid, e) { var id = "id" + Math.round(Math.random()*1000000), c = e.childNodes, r = id+'[label="'+(e.tagName ? e.tagName : e.nodeValue.replace(/[\n\r]+/g," "))+'"];\n'; for(var i = 0; i < c.length; i++) { r+=f(id, c[i]); }; if(pid) {r += pid + "->" + id + ";\n";}; return r;}; document.body.innerText = "digraph {\n" + f(false, document.getElementsByTagName("html")[0]) + "}"})())

下面是一个Bookmarklet，用于将页面转换为Graphviz格式

javascript:void((function() {var f = function(pid, e) { var id = "id" + Math.round(Math.random()*1000000), c = e.childNodes, r = id+'[label="'+(e.tagName ? e.tagName : e.nodeValue.replace(/[\n\r]+/g," "))+'"];\n'; for(var i = 0; i < c.length; i++) { r+=f(id, c[i]); }; if(pid) {r += pid + "->" + id + ";\n";}; return r;}; document.body.innerText = "digraph {\n" + f(false, document.getElementsByTagName("html")[0]) + "}"})())

javascript:void（（function（）{var f=function（pid，e）{var id=“id”+Math.round（Math.random（）*1000000），c=e.childNodes，r=id++，[label=“”+（e.tagName？e.tagName:e.nodeValue.replace（/[\n\r]+/g，”）+“）”）；\n'；for（var i=0；iid；\r}；\r}；document.body.innerText=“有向图{\n”+f（false，document.getElementsByTagName（“html”）[0]）+“}”}）（）

以下是该格式的快速解决方法：

然后生成一个png文件：（示例在Unix下工作）

dot-Tpngg.png

---

Graphviz也有一个Javascript渲染器。我还没有尝试过，但看起来很有希望。

您可以检索某个元素的所有子元素，并返回它们的标记、类、id和深度。然后你可以用css来创建一个可视化的树。这样的办法应该行得通。例如

jQuery插件：

$.fn.buildTree = function() {
    var tree = {};
    this.find('*').andSelf().each(function(i, v) {
        var parents = $(this).parents().length - 1;
        for (var i = 0; i < parents; i++) {
            tree[v.tagName.toLowerCase()] = {
                id: v.id,
                className: v.className,
                depth: i
            }
        }
    });
    return tree;
};

$.fn.buildTree=函数（）{
var-tree={}；
this.find（'*'）和self（）.each（函数（i，v）{
var parents=$（this.parents（）.length-1；
对于（变量i=0；i

然后你把它叫做：

var tree= $('aside').buildTree(),
    html = '';
for (tag in tree) {
    html += '<p><strong>Tag:</strong> ' + tag + 
            ' | <strong>Class:</strong> ' + tree[tag].className + 
            ' | <strong>Depth:</strong> ' + tree[tag].depth;
}
$('#tree').append(html);

var-tree=$（'aside'）.buildTree（），
html=''；
用于（树中的标记）{
html+='标记：'+Tag+
“|类：”+树[tag]。类名+
“|深度：”+树[tag]。深度；
}
$（'#tree'）.append（html）；

使用Web服务生成图形听起来比使用Javascript和生成HTML/CSS（对我来说）要好，尤其是如果图形可以使用可保存（已知、标准）的文本内容提供；前端生成文本内容，后端生成PNG格式的实际图形。我通常也会这样做，但我正在寻找一些我可以根据任何需要轻松设置样式的东西。所以它是完全定制的，如果需要的话，我可以让它与我需要的任何东西搭配。这对于纯阅读来说是很好的，而且我认为它可以很容易地扩展。但正如我所说的，我正在寻找一些更具图形化的东西，以便于准备和遵循。编辑：忘记提及这很可能是一个单独的页面。很可能会有一个地址的输入，然后它会获取该地址的DOM并相应地构建映射。。。为什么？有很多开发工具，比如Firebug，可以帮助您更好地探索和可视化DOM树。任何一个合理大小的页面都会生成一个巨大而复杂的图形，这不是很容易理解的。另外，你在Firefox中看到3D“倾斜”功能了吗？