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 相关文章推荐
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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分页类代码
2013/04/02 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
对比分析json及XML
2014/11/28 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
pyqt5简介及安装方法介绍
2018/01/31 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
淘宝中秋节活动方案
2014/01/31 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
离婚协议书怎么写
2014/09/12 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
家长意见书
2015/06/04 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
改进工作作风心得体会
2016/01/23 职场文书
MySQL实现配置主从复制项目实践
2022/03/31 MySQL