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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
vue操作dom元素的3种方法示例
Sep 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
Wordpress php 分页代码
2009/10/21 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python简易远程控制单线程版
2018/06/20 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
中专生自我鉴定
2013/12/17 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
交通事故调解协议书
2014/04/16 职场文书
开学典礼策划方案
2014/05/28 职场文书
会计学专业求职信
2014/07/17 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
创业计划书之花店
2019/09/20 职场文书
python 调用js的四种方式
2021/04/11 Python