javascript转换字符串为dom对象(字符串动态创建dom)


Posted in Javascript onMay 10, 2010

前言:
在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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
JavaScript几种形式的树结构菜单
May 10 #Javascript
js function使用心得
May 10 #Javascript
javascript 模式设计之工厂模式详细说明
May 10 #Javascript
javascript 精粹笔记
May 09 #Javascript
javascript之通用简单的table选项卡实现(二)
May 09 #Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 #Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 #Javascript
You might like
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
js常见表单应用技巧
2008/01/09 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
实例分析js事件循环机制
2017/12/13 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python正则简单实例分析
2017/03/21 Python
Python内置模块logging用法实例分析
2018/02/12 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Django密码存储策略分析
2020/01/09 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
终端业务员岗位职责
2013/11/27 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
难忘的一天教学反思
2014/04/30 职场文书
小学学校评估方案
2014/06/08 职场文书
2014年体育部工作总结
2014/11/13 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书