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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
vue引入静态js文件的方法
Jun 20 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/06/06 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php限制ip地址范围的方法
2015/03/31 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
javascript call方法使用说明
2010/01/11 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
《三袋麦子》教学反思
2014/03/02 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
目标责任书范文
2014/04/14 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2016特色励志班级口号
2015/12/24 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
学习nginx基础知识
2021/09/04 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android