HTML(DOM)与JavaScript嵌套数组之间相互转换
发布时间:2018-10-21 23:01:31 所属栏目:创业 来源:站长网
导读:html2ja:将html方针元素理会为 Java Script数组字面量,每项的值为tagName, className, id等CSS选择器组合; showJa:将html2ja天生的数组缩进名目化表现; walkDOM:遍历DOM方针元素(这个来自老道的the Good Parts)。 ja2html:与html相反的进程 PS:以下
html2ja:将html方针元素理会为JavaScript数组字面量,每项的值为tagName, className, id等CSS选择器组合; showJa:将html2ja天生的数组缩进名目化表现; walkDOM:遍历DOM方针元素(这个来自老道的the Good Parts)。 ja2html:与html相反的进程 PS:以下代码只是简朴的构想测试,现实行使请自行完美。 代码片断: Copy to Clipboard引用的内容:[www.veryhuo.com] /*<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 += 't'; s = s.slice(0, -1) + ',n' + 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> */ 代码片断: Copy to Clipboard引用的内容:[www.veryhuo.com] /*<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> */ (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |