js 字符串转dom 和dom 转字符串

js 字符串转dom 和dom 转字符串

前言：

在javascript里面动态建立标准dom对象通常使用：

  var obj = document.createElement('div');

而后再给obj设置一些属性。

可是，在实际使用过程当中，有些人可能会想，要是能这样建立标准的dom对象就行了

 伪代码：var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');

那么今天的目的就是教你们怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象

 

start：

其实实现这样的一个转换是很简单的，这里主要是利用了一个属性innerHTML.

innerHTML，我相信你们都使用过，特别是动态往一个元素里面插内容时使用，这里我仍是在介绍下innerHTML，方便于还不太熟悉的人。

innerHTML不是w3c标准，是由ie发明创造出来的，可是因为这个属性的方便性，和当时微老大的地位，其它非ie浏览器也内置了innerHTML并给出了支持。

虽然innerHTML不是w3c标准，可是倒是一个事实标准，这个事实标准很重要，也就是目前主流浏览器都支持innerHTML，天然就作到了兼容多浏览器。

code:

 function parseDom(arg) {

　　 var objE = document.createElement("div");

　　 objE.innerHTML = arg;

　　 return objE.childNodes;

};

短短几行代码就实现了转换，咱们首先用标准的方法建立一个div出来，在用innerHTML来插入一个元素，其实也就是利用浏览器本身的内核算法来实现的一个转换。在用childNodes返回出来。

这样咱们就完成了一个字符串到标准dom的转换，巧妙的利用浏览器自己的算法，能够用简单少许的代码来完成大量复杂的转换，咱们不用去解析字符串，而是交给浏览器本身来完成，这样既准确又无误。

使用：

var obj=parseDom('<div id="div_1" class="div1">Hello World!</div>');

var obj=parseDom('<div id="div_1" class="div1">Hello World!</div><span>多个也不要紧</span>');

注意：

childNodes返回的是一个相似数组的list。因此若是是一个元素，要使用这个dom须要这样使用obj[0]。若是是多个同级的dom转换，能够这样使用obj[0]、obj[1]…

 

 

dom 转字符串更简单，可使用三方类库实现

jquery 中提供的有dom 转字符串的方法 var domStr= $("#").html();

转换原理你们能够参考一下源代码，估计应该是采用深度遍历的方式返回拼接字符串

end

 

到这里就结束了，在这里向你们推荐一个我本身写的js框架，上面的这个方法集成在框架里面了

使用：b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')

 

转自：http://zha-zi.iteye.com/blog/1931474