HTML(DOM)與JavaScript嵌套數組之間相互轉換
來源：程序員人生 發布時間：2014-01-13 01:30:12 閱讀次數：2707次
html2ja：將html目標元素解析為JavaScript數組字面量，每項的值為tagName, className, id等CSS選擇器組合;
showJa：將html2ja生成的數組縮進格式化顯示;
walkDOM：遍歷DOM目標元素(這個來自老道的the Good Parts)。
ja2html：與html相反的過程
PS：以下代碼只是簡單的構思測試，實際使用請自行完善。
代碼片段：
/*
<html>
<head>
<title>HTML RESTructure</title>
<style>
</style>
<script>
*/
// workDOM函數遍歷目標元素或節點
// 有兩種模式:
// 1. `element`模式（默認）（包含所定義的元素項）
// 2. `node`模式（包含文本節點在內的所有節點）
function walkDOM(mode) {
var m = mode || "element";
var f = "firstElementChild",
n = "nextElementSibling";
if (m === "node") {
f = "firstChild";
n = "nextSibling";
}
return function _(val, func) {
func(val);
val = val[f];
while (val) {
_(val, func);
val = val[n];
}
};
}
// html2ja函數將HTML目標元素轉換為JavaScript數組，
// 這個函數中調用了eval函數, 并且為每一個目標范圍
// 內的元素加了一個index屬性（這是特意設置的）。
function html2ja(elt) {
var walk = walkDOM(),
lis;
walk(elt, function (el) {
var pe = el.parentElement,
pes = el.previousElementSibling;
var sel = el.tagName;
if (el.className)
sel += ' .' + el.className;
if (el.id)
sel += ' #' + el.id;
if (el === elt) {
el.index = '0';
lis = [sel];
} else {
if (pes) {
el.rank = pes.rank + 1;
} else {
el.rank = 1;
}
var t = pe.index.split(',').slice(0,-1).concat(el.rank);
el.index = t.concat(0).join(',');
eval('lis[' + t.join('][') + '] = [sel];');
}
});
return lis;
}
window.onload = function () {
var ind = '';
var showJa = function _(o) {
var i,
s = '';
for (i = 0; i < o.length; i++) {
var s1;
if (typeof o[i] === 'object') {
ind += ' ';
s = s.slice(0, -1) + ',' + ind + _(o[i]) + ']';
} else {
s = s.slice(0, -1) + '["' + o[i] + '"]';
}
}
ind = ind.slice(0, -1);
return s;
};
document.getElementById("code-pre").innerText = showJa(html2ja(document.documentElement));
};
/*
</script>
</head>
<body>
<div id="header">
<h1 align="center">HTML RESTructure</h1>
<p align="right">[HTML] + [REST] + [JSON] = [HTML RESTructure]</p>
</div>
<div id="main">
<div class="article" id="art_1">
<h2>HTML <==> REST</h2>
<p>
<pre>
HTML DOM是一個樹形的文檔模型，
所以很方便的將其轉化為其它數據結構。
這里，我將DOM映射到JSON，具體來說，
是用JavaScript Array字面量表示出來。
而REST也可以JSON的方式保存其狀態
及邏輯結構，若是通過JSON架起這座從
HTML到REST（或反過來）的橋梁，數據
結構將會變得異常清晰，內容管理更便
捷。
</pre>
</p>
</div>
<div class="article" id="art_2">
<h2>XHTML Core Elements</h2>
<p>
<pre>
通常情況下，有這些就足夠了:
1. DIV: 塊
2. P: 段落
3. SPAN: 節
4. A: 錨
5. H1-H6: 標題
6. UL & LI: 無序列表
7. PRE: 預格式文本
</pre>
</p>
</div>
<div class="article" id="art_3">
<h2>JavaScript Array</h2>
<p>
<pre id="code-pre">
</pre>
</p>
</div>
</div>
<div id="footer">
<p align="center">© <a class="user-name" href="mailto: rugby@gmail.com">rugby</a>, 2011</p>
</div>
</body>
</html>
*/
代碼片段：
/*
<script>
*/
// 將JavaScript嵌套數組轉換為HTML DOM結構
// 與上面的html2ja剛好相反
var ja2html = function _(ja, dst) {
var els = ja[0].split(' '),
elt = document.createElement(els[0]);
if (dst.tagName !== els[0]) {
if (els.length > 1) {
if (els.length < 3) {
var sig = els[1].slice(0,1);
if (sig === '.')
elt.className = els[1].slice(1);
else
elt.id = els[1].slice(1);
} else {
elt.className = els[1].slice(1);
elt.id = els[2].slice(1);
}
}
dst.appendChild(elt);
dst = elt;
}
var j = 1;
while (j < ja.length) {
_(ja[j], dst);
j += 1;
}
};
// 測試
var ja = (
["HTML",
["HEAD",
["TITLE"],
["STYLE"],
["SCRIPT"]],
["BODY",
["DIV #header",
["H1"],
["P"]],
["DIV #main",
["DIV .article #art_1",
["H2"],
["P"],
["PRE"],
["P"]],
["DIV .article #art_2",
["H2"],
["P"],
["PRE"],
["P"]],
["DIV .article #art_3",
["H2"],
["P"],
["PRE #code-pre"],
["P"]]],
["DIV #footer",
["P",
["A .user-name"]]]]]
);
// alert(ja);
window.onload = function () { ja2html(ja[2], document.body); };
/*
</script>
*/
