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