javascript - HTML 节点图生成器？

Question

好吧，我要找的是可以生成网页节点的图形树式 map 的东西。

所以从本质上讲，它在理论上可以改变这样的东西:

<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 标签内，但为了举例，我将使用我的投资组合页面中的片段和一些生成的文本)

进入类似于 this 的内容:

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

这里绝对没有设计思想，所以不要批评它，纯粹是为了示例目的。我在 photoshop 中快速制作了这张图片，只是为了准确说明我在说什么。大多数情况下，所有这些都可以使用 CSS 轻松生成。它无论如何都不必是这种图形，但为了让我感到无聊，它是。

---

我正在寻找可以为我执行此操作的插件或软件。我希望它能以 HTML 格式或图像形式生成此 map 。我想任何 map 类型都可以，只要它易于理解即可。

作为最后的手段，如果我找不到我正在寻找的东西，我可能最终会自己编写它，如果发生这种情况，我很乐意寻找一些人来帮助编码插件。

Answer 1

您可以检索某个元素的所有子元素并返回它们的标签、类、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);