html节点映射生成器？

Answer 1

插件：

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

graphviz

是做这样的事情的好工具。

您可以使用一块JavaScript生成GraphViz文件并使用该工具生成PNG。

JavaScript应递归访问所有元素并为每个元素生成独特的ID，并以相当易于理解的GraphViz格式写出它们。

Answer 2

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]) + "}"})())

therformat的快速工作：Http：//www.orient-lodge.com/node/3408

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

dot -Tpng < graph.dot > g.png

也是GraphViz的JavaScript渲染器。

Carviz

我还没有尝试过，但看起来很有希望。
    

几天前，我从字面上做到了这一点，只是看到了这个！ 链接：https：//nellowtcs.github.io/htmlnodemapper github：

https：//github.com/nellowtcs/htmlnodemapper