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 创建对象和构造类实现代码
Jul 30 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
vue axios整合使用全攻略
May 24 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue内置指令详解
2018/04/03 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python关键字and和or用法实例
2015/05/28 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python交换两个变量的值方法
2019/01/12 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python性能测试工具locust的使用
2020/12/28 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
代收款委托书范本
2014/10/01 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
护士年终考核评语
2014/12/31 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Django路由层如何获取正确的url
2021/07/15 Python