HTML节点映射生成器？

Question

好的，我要找的是能够生成网页节点图形树状地图的工具。

简单来说，它可以理论上将这样的内容转化成：

<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标签内，但为了举例说明，我将使用我的作品集页面中的一些生成文本。

转化后如下所示：这里：

示例 http://www.deviantart.com/download/287437946/node_map_by_wild_fire126-d4r4sje.png

这完全没有设计思想，因此不要批评它，纯粹为了举例说明。我用Photoshop快速制作了这张图片，只是为了准确地说明我的意思。这些中的大部分都可以很容易地通过CSS来生成。其中并不一定需要这么图形化，但出于无聊的目的，就是这样了。

---

我正在寻找一个插件或软件来帮助我完成这个任务。我希望它能够以HTML或图像的形式生成此映射。 我想任何类型的映射都可以，只要它容易操作即可。

如果我找不到自己满意的解决方案，作为最后的选择，我可能会自己编写。如果这种情况发生，我会很高兴寻找一些人来帮助编写插件的代码。

- Wild_Fire126

---

编辑：忘了提到这可能是一个单独的页面。很可能会有一个地址输入框，然后它会获取该地址的DOM，并相应地构建地图。 - Wild_Fire126

我可以问一下...为什么吗？有很多开发工具，比如Firebug，可以帮助您更好地探索和可视化DOM树，比这个工具更好。任何一个合理大小的页面都会生成一个庞大而复杂的图形，不太容易理解。此外，您是否看过Firefox中的3D“倾斜”功能？http://blog.mozilla.com/tilt/ - DG.

Answer 1

Graphviz 是一个很好的工具，可用于完成这样一件事情。

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

JavaScript 应递归访问所有元素并为每个元素生成唯一 ID，并以相当易于理解的 Graphviz 格式写出。

以下是将页面转换为 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]) + "}"})())

这是一个关于格式的快速演示：http://www.orient-lodge.com/node/3408 然后生成一个png文件：（在Unix下的示例）

dot -Tpng < graph.dot > g.png

还有一个针对Graphviz的Javascript渲染器Canviz，我还没有尝试过，但看起来很有前途。

- Gottox

---

拥有一个可以生成图形的Web服务听起来比使用JavaScript并生成HTML / CSS更好（至少对我来说是这样），特别是如果图形可以使用可保存的（已知，标准）文本内容来提供。前端生成文本内容，后端生成实际的PNG格式图形。 - Yanick Rochon

我通常也会这样做，但我正在寻找一些容易定制的东西，以满足任何需求。因此，它是完全定制的，如果需要，我可以让它与任何我需要的东西配合使用。 - Wild_Fire126

Answer 2

你可以检索某个元素的所有子元素并返回它们的标签、类、ID和深度。然后，您可以使用CSS进行创意，创建一个可视化树形结构。类似这样的东西应该可以工作。示例请参见http://jsfiddle.net/elclanrs/UHbMa/。

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;
};

然后你可以这样调用它：

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);

- elclanrs

---

这对于纯阅读来说很不错，我认为它可以很容易地扩展。但正如我所说的，我正在寻找更具图形化的东西，以使其易于阅读和跟踪。 - Wild_Fire126