HTML(DOM)与JavaScript嵌套数组之间相互转换
html2ja：将html目标元素解析为JavaScript数组字面量，每项的值为tagName, className, id等CSS选择器组合；
showJa：将html2ja生成的数组缩进格式化显示；
walkDOM：遍历DOM目标元素（这个来自老道的the Good Parts）。
ja2html：与html相反的过程
PS：以上代码只是简单的构思测试，实际使用请自行完善。
1. [代码][JavaScript]代码
/*
<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>http://www.enterdesk.com/special/shouhui/
<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>
*/
2. [代码][JavaScript]代码
/*
<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>
*/
HTML(DOM)与JavaScript嵌套数组之间相互转换的更多相关文章
- php中 xml json 数组 之间相互转换
php中 xml json 数组 之间相互转换 1 数组转json $result = array( 'status' =>$status, 'message'=>$message, ' ...
- DOM与JavaScript、jQuery之间的关系
DOM(document object model) 其实是浏览器内元素对象的一个总称 我们用JavaScript对网页进行的所有操作都是通过DOM进行的.DOM属于浏览器,而不是JavaScript ...
- Java ArrayList 数组之间相互转换
做研发的朋友都知道,在项目开发中经常会碰到list与数组类型之间的相互转换,本文通过一个简单的例子给大家讲解具有转换过程. package test.test1; import java.util.A ...
- 关于js中的json对象,json串,数组之间相互转换
将json对象转换成string var loginUser = {username: username, password: password}//方式一 localStorage.setItem( ...
- DOM，浏览器，javascript，html之间的关系
来源于:https://github.com/hucheng91/myBlog/blob/master/web/dom/dom.md DOM定义 DOM可以以一种独立于平台和语言的方式访问和修改一个文 ...
- java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组之间的转换方法
1.java代码中fastjson生成字符串和解析字符串的方法 List<TemplateFull> templateFulls = new ArrayList<TemplateFu ...
- HTML与DOM BOM javascript
1.什么是DOM? 简单说就是DOM规定了HTML,XML等的一些文档映射规范,使JavaScript可以根据这些规范来进行获取元素,在元素上进行各种操作,使得用户页面可以动态的变化,从而大大使页面的 ...
- JS对象与Dom对象与jQuery对象之间的区别
前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
- 前端面试之JavaScript中数组的方法！【残缺版！！】
前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...
随机推荐
- 深入理解Thread构造函数
上一篇快速认识线程 本文参考汪文君著:Java高并发编程详解. 1.线程的命名 在构造现成的时候可以为线程起一个名字.但是我们如果不给线程起名字,那线程会有一个怎样的命名呢? 这里我们看一下Threa ...
- 随想录（fatfs的学习）
[ 声明:版权全部,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 上学的时候就对文件系统非常有兴趣.可是苦于没有合适的fs代码能够学习.市面上的fs代码,要么太 ...
- 使用cacheBuilder实现函数防抖
在接口中出现的相同请求重复且连续发送的情况导致一些业务BUG,需要在接口上实现防抖 使用google的cacheBuilder import com.google.common.cache.Cache ...
- thrift的使用及遇到的问题
centos 系统安装官方文档:http://thrift.apache.org/docs/install/centos 一.按该文档安装出现了一系列的问题,记录如下: 1.安装thrift时./bo ...
- Nginx 第三方模块的安装以及一致性哈希算法的使用
Nginx 第三方模块的安装以及一致性哈希算法的使用 第三方模块安装方法总结: 以ngx_http_php_memcache_standard_balancer-master为例 1:解压 到 pat ...
- 每天进步一点点——Linux中的线程局部存储（二）
转载请说明出处:http://blog.csdn.net/cywosp/article/details/26876231 在Linux中另一种更为高效的线程局部存储方法,就是使用keyword ...
- 关于mysql的表名/字段名/字段值是否区分大小写的问题
http://www.2cto.com/database/201202/121253.html 1.mysql默认情况下是否区分大小写,使用show Variables like '%table_na ...
- idea安装plugin
---恢复内容开始--- ---恢复内容结束---
- Fckeditor常见漏洞的挖掘与利用整理汇总
查看编辑器版本号 FCKeditor/_whatsnew.html ------------------------------------------------------------- 2. V ...
- python--网络编程--主机命令执行
import os os.system()#执行系统命令 #只能执行命令不能返回值 import subprocess # 能执行系统命令 res=subprocess.Popen('dir',she ...