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小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
javascript中var的重要性分析
Feb 11 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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学习 变量使用总结
2011/03/24 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
基于python log取对数详解
2018/06/08 Python
Django框架 信号调度原理解析
2019/09/04 Python
Python的互斥锁与信号量详解
2019/09/12 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
如何利用python进行时间序列分析
2020/08/04 Python
python全栈开发语法总结
2020/11/22 Python
医院实习接收函
2014/01/12 职场文书
大学生求职自我评价
2014/01/16 职场文书
学校党员对照检查材料
2014/08/28 职场文书
尊师重教演讲稿
2014/09/04 职场文书
趣味运动会开幕词
2015/01/28 职场文书