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. 第4章 使用 Spring Boot

    使用 Spring Boot 本部分将详细介绍如何使用Spring Boot. 这部分涵盖诸如构建系统,自动配置以及如何运行应用程序等主题. 我们还介绍了一些Spring Boot的最佳实践(best ...

  2. mysql 设置不了短串密码怎么办 You must reset your password using ALTER USER statement before executing this statement.

    centos7+ 安装 mysq 5.7 https://www.linuxidc.com/Linux/2016-09/135288.htm set global validate_password_ ...

  3. 提高速度 history 的利用

    history的介绍history是shell的内置命令,其内容在系统默认的shell的man手册中.history是显示在终端输入并执行的过命令,系统默认保留1000条.[root@localhos ...

  4. 为什么我们要用Python

    最近有一个朋友问我:为什么我要用Python,这是一个好问题,今天有空,把这个问题简单整理了一下,回来朋友的问题.该整理主要来源于网络和其他资料,如果有侵权还请告知.         Python的好 ...

  5. composer配置和安装php框架

    第一步:安装composerwin环境安装:下载地址:https://getcomposer.org/Composer-Setup.exe 下载后直接点击安装即可测试:cmd ->compose ...

  6. GOF 23种设计摩搜-建造者模式

    • 场景: – 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样 一个问题需要处理: • 装配这些子组件是不是有个步骤问题? – 实际开发中,我们所需要的对象构建时 ...

  7. Android学习笔记(35):Android活动条

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,当中有一个很好用的新功能就是引入的ActionBar,用于代替3.0之前的标题栏,并提供更为丰富的导航效果. ActionB ...

  8. [LeetCode][Java] Combinations

    题目: Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For ex ...

  9. 函数指针使用演示样例（參考Linux-内核代码）

    本文有xhz1234(徐洪志)编写,转载请注明出处. http://blog.csdn.net/xhz1234/article/details/36635083 作者:徐洪志 近期阅读Linux-内核 ...

  10. Spring Boot 测试时的日志级别

    1.概览 该教程中,我将向你展示:如何在测试时设置spring boot 日志级别.虽然我们可以在测试通过时忽略日志,但是如果需要诊断失败的测试,选择正确的日志级别是非常重要的. 2.日志级别的重要性 ...