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">&copy; <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嵌套数组之间相互转换的更多相关文章

  1. php中 xml json 数组 之间相互转换

    php中 xml json  数组 之间相互转换 1 数组转json $result = array( 'status' =>$status, 'message'=>$message, ' ...

  2. DOM与JavaScript、jQuery之间的关系

    DOM(document object model) 其实是浏览器内元素对象的一个总称 我们用JavaScript对网页进行的所有操作都是通过DOM进行的.DOM属于浏览器,而不是JavaScript ...

  3. Java ArrayList 数组之间相互转换

    做研发的朋友都知道,在项目开发中经常会碰到list与数组类型之间的相互转换,本文通过一个简单的例子给大家讲解具有转换过程. package test.test1; import java.util.A ...

  4. 关于js中的json对象,json串,数组之间相互转换

    将json对象转换成string var loginUser = {username: username, password: password}//方式一 localStorage.setItem( ...

  5. DOM，浏览器，javascript，html之间的关系

    来源于:https://github.com/hucheng91/myBlog/blob/master/web/dom/dom.md DOM定义 DOM可以以一种独立于平台和语言的方式访问和修改一个文 ...

  6. java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组之间的转换方法

    1.java代码中fastjson生成字符串和解析字符串的方法 List<TemplateFull> templateFulls = new ArrayList<TemplateFu ...

  7. HTML与DOM BOM javascript

    1.什么是DOM? 简单说就是DOM规定了HTML,XML等的一些文档映射规范,使JavaScript可以根据这些规范来进行获取元素,在元素上进行各种操作,使得用户页面可以动态的变化,从而大大使页面的 ...

  8. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  9. 前端面试之JavaScript中数组的方法！【残缺版！！】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

随机推荐

  1. Usaco_Contest_2013_Open_Bovine Problem 1. Bovine Ballet

    Problem 1: Bovine Ballet [Brian Dean, 2013] In an attempt to challenge the stereotypical perception ...

  2. [java基础] 001 - 记一次堆栈溢出异常(StackOverFlowError)

    上午经理发来一个任务,解决某个接口异常,此接口第一次调用成功返回: {ret=Y, orderResultList=[{itemno=31920190521083622032, sub_msg=成功, ...

  3. 机器学习之SVM

    一.线性分类器: 首先给出一个非常非常简单的分类问题(线性可分),我们要用一条直线,将下图中黑色的点和白色的点分开,很显然,图上的这条直线就是我们要求的直线之一(可以有无数条这样的直线) 假如说,我们 ...

  4. iOS应用崩溃日志揭秘

    这篇文章还可以在这里找到 英语 Learn how to make sense of crash logs! 本文作者是 Soheil Moayedi Azarpour, 他是一名独立iOS开发者. ...

  5. 一天时间用OpenFire打造自己的IM聊天工具

    Openfire采用Java开发,开源的实时协作(RTC)服务器基于XMPP(Jabber)协议.Openfire安装和使用都非常简单,并利用Web进行管理.单台服务器可支持上万并发用户. 好友界面 ...

  6. 高仿QQ6.0側滑菜单之滑动优化（二）

    好了,昨天已经实现了高仿QQ6.0的側滑大致框架.如有兴趣.能够去看下仿QQ6.0側滑之ViewDragHelper的使用(一) 可是之前的实现.仅仅是简单的能够显示和隐藏左側的菜单,可是特别生硬,并 ...

  7. PS 基础知识 CMYK全称是什么

    已解决 请问谁知道CMYK四色的英文全称? 悬赏分:20 - 解决时间:2006-9-6 16:23 C代表什么颜色?英文全称是什么? M代表什么颜色?英文全称是什么? Y代表什么颜色?英文全称是什么 ...

  8. JS推断浏览器类型与版本号

    在JS中推断浏览器的类型,预计是每一个编辑过页面的开发者都遇到过的问题.在众多的浏览器产品中.IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常须要依据不同的浏 ...

  9. 函数式编程( Functional)与命令式编程( Imperative)对比

    1.函数式编程带来的好处 函数式编程近些年异军突起,又重新回到了人们的视线,并得到蓬勃发展.总结起来,无外乎如下好处: 1.减少了可变量(Immutable Variable)的声明,程序更为安全.  ...

  10. ElasticSearchserver操作命令

    在win7环境,进入elasticsearch安装文件夹的bin文件夹: 1. elasticsearch.bat 就能够启动elasticsearch了.执行这个插件的优点是:elasticsear ...