javascript转换字符串为dom对象（字符串动态创建dom）
更新时间：2010年05月10日 18:24:17 作者：
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的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]…
end
到这里就结束了，在这里向大家推荐一个我自己写的js框架，上面的这个方法集成在框架里面了
使用：b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')
bBank 开源Javascript框架
在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]…
end
到这里就结束了，在这里向大家推荐一个我自己写的js框架，上面的这个方法集成在框架里面了
使用：b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')
bBank 开源Javascript框架
相关文章
2008-01-01
javascript表单验证 - Parsley.js使用和配置
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能，基于它的强大DOM-API,感兴趣的你可以不要错过了哦2013-01-01
这篇文章主要介绍了JavaScript中神奇的call()方法,本文用浅显的语言帮助你加深理解call()方法,需要的朋友可以参考下2015-03-03
JavaScript中对象property的读取和写入方法介绍
这篇文章主要介绍了JavaScript中对象property的读取和写入方法介绍,本文讲解了原型继承链中property的读取、原型继承链中property的写入等内容,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了数据库管理工具PHPMyAdmin使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
下面小编就为大家带来一篇JS 实现倒计时数字时钟效果【附实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做一个参考。2016-03-03
JavaScript 中的单例内置对象Global 与 Math
这篇文章主要介绍了JavaScript 中的单例内置对象Global与Math，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要为大家详细介绍了bootstrap table实现单击单元格可编辑功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
往往在网页上有JS加密代码的解码方法，但是由于代码中存在转义字符，无法正确的进行解码。2010-07-07
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
我们用了5篇文章来讨论如何编写一个JavaScript异步调用框架（问题 & 场景、用例设计、代码实现、链式调用、链式实现），现在是时候让我们看一下在各种常见开发情景中如何使用它了。2009-08-08
最新评论