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模拟加速运动与减速运动代码分享
Dec 11 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
js同时按下两个方向键
2007/12/01 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
基于vue的换肤功能的示例代码
2017/10/10 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python制作抖音代码舞
2019/04/07 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
如何理解python面向对象编程
2020/06/01 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
优秀共产党员先进事迹
2014/01/27 职场文书
个性与发展自我评价
2014/02/11 职场文书
3的组成教学反思
2014/04/30 职场文书
企业党员一句话承诺
2014/05/30 职场文书
酒店员工培训方案
2014/06/02 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书