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 鼠标滚轮事件
Apr 09 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
使用原生js编写一个简单的框选功能方法
May 13 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和ACCESS写聊天室(九)
2006/10/09 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP中的事务使用实例
2015/05/26 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
php5与php7的区别点总结
2019/10/11 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python File readlines() 使用方法
2018/03/19 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
就业自我评价
2014/02/04 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
房屋出租委托书格式
2014/09/23 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python