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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python实现截屏的函数
2015/07/26 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python之web模板应用
2017/12/26 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python字典的常用方法总结
2019/07/31 Python
python实现淘宝购物系统
2019/10/25 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
Java基础面试题
2014/07/19 面试题
关于梦想的演讲稿
2014/05/05 职场文书
授权委托书样本
2014/09/25 职场文书
南极大冒险观后感
2015/06/05 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python