84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
|
<!doctype html>
|
|||
|
|
<html id="doc">
|
|||
|
|
<head><meta charset="utf-8"/>
|
|||
|
|
<title>Stuff</title>
|
|||
|
|
<script type="application/javascript">
|
|||
|
|
function gid(id) { return document.getElementById(id); }
|
|||
|
|
|
|||
|
|
function ce(tag, cls, parent_node) {
|
|||
|
|
var e = document.createElement(tag);
|
|||
|
|
e.className = cls;
|
|||
|
|
if (parent_node) parent_node.appendChild(e);
|
|||
|
|
return e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dom_tree(id) {
|
|||
|
|
gid('tree').textContent = "";
|
|||
|
|
gid('tree').appendChild(mktree(gid(id), null));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function mktree(e, p) {
|
|||
|
|
var t = ce("div", "tree", p);
|
|||
|
|
var tog = ce("span", "toggle", t);
|
|||
|
|
var h = ce("span", "tag", t);
|
|||
|
|
|
|||
|
|
if (e.tagName === undefined) {
|
|||
|
|
h.textContent = "#Text";
|
|||
|
|
var txt = e.textContent;
|
|||
|
|
if (txt.length > 0 && txt.match(/\S/)) {
|
|||
|
|
h = ce("div", "txt", t);
|
|||
|
|
h.textContent = txt;
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tog.textContent = "−";
|
|||
|
|
tog.onclick = function () { clicked(tog); }
|
|||
|
|
h.textContent = e.nodeName;
|
|||
|
|
|
|||
|
|
var l = e.childNodes;
|
|||
|
|
for (var i = 0; i != l.length; i++)
|
|||
|
|
mktree(l[i], t);
|
|||
|
|
return t;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clicked(e) {
|
|||
|
|
var is_on = e.textContent == "−";
|
|||
|
|
e.textContent = is_on ? "+" : "−";
|
|||
|
|
e.parentNode.className = is_on ? "tree-hide" : "tree";
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
#tree { white-space: pre; font-family: monospace; border: 1px solid }
|
|||
|
|
.tree > .tree-hide, .tree > .tree
|
|||
|
|
{ margin-left: 2em; border-left: 1px dotted rgba(0,0,0,.2)}
|
|||
|
|
.tree-hide > .tree, .tree-hide > .tree-hide { display: none }
|
|||
|
|
.tag { color: navy }
|
|||
|
|
.tree-hide > .tag { color: maroon }
|
|||
|
|
.txt { color: gray; padding: 0 .5em; margin: 0 .5em 0 2em; border: 1px dotted rgba(0,0,0,.1) }
|
|||
|
|
.toggle { display: inline-block; width: 2em; text-align: center }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<article>
|
|||
|
|
<section>
|
|||
|
|
<h1>Headline</h1>
|
|||
|
|
Blah blah
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h1>More headline</h1>
|
|||
|
|
<blockquote>Something something</blockquote>
|
|||
|
|
<section><h2>Nested section</h2>
|
|||
|
|
Somethin somethin list:
|
|||
|
|
<ul>
|
|||
|
|
<li>Apples</li>
|
|||
|
|
<li>Oranges</li>
|
|||
|
|
<li>Cetera Fruits</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
</article>
|
|||
|
|
<div id="tree"><a href="javascript:dom_tree('doc')">click me</a></div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|