HTMLの構造ダンプ

HTMLの構造をダンプして表示。

function dumpNode(node, data, deep) {
    for (var i = 0; i < node.childNodes.length; i++) {
	var e = node.childNodes[i];
	if (e.nodeType != 1) continue;
	var r = {
	    deep: deep,
	    tag: e.tagName.toLowerCase(),
	    id: ((e.id) ? e.id : ""),
	    cl: ((e.className) ? e.className : ""),
	    value: (e.firstChild && e.firstChild.nodeValue) ? e.firstChild.nodeValue : "",
	};
	data.push(r);
	if (e.childNodes.length > 0) {
	    dumpNode(e, data, deep + 1);
	}
    }
}

function count(str, n) {
    for (var i = 0, r = ""; i < n; i++) r+= str;
    return r;
}

function view(document) {
    var data = [];
    var r = [];
    var prev = 0;
    var ignore = {br:0, script:0};
    
    dumpNode(document.body, data, 0);
    for (var i = 0; i < data.length; i++) {
	var d = data[i];
	if (d.tag in ignore) continue;
	var v = ['<div class="dump">',
	         d.tag ,
		 ((d.cl) ? "." + d.cl : ""),
		 ((d.id) ? "#" + d.id : ""),
		 ((d.value) ? "[" + d.value.substr(0, 30) + "]": ""),
		 ((prev >= d.deep) ? count("</div>", prev - d.deep + 1) : "")
		].join("");
	r.push(v);
	prev = d.deep;
    }
    var css = [
	'<style type="text/css">',
	"div.dump {",
	"padding: 2px 2px 2px 1em;",
	"margin : 2px;",
	"border: 1px solid;",
	"background: #ffffff;",
	"}",
	"</style>"
    ].join("\n");
    document.body.innerHTML = css + r.join("\n");
 }

view(document);

参考

komekami edit