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事件串连执行多个处理过程的方法
Mar 09 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
javascript数据类型验证方法
Dec 31 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
Vue中的scoped实现原理及穿透方法
May 15 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解析url的三个示例
2014/01/20 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python功能键的读取方法
2015/05/28 Python
python更新列表的方法
2015/07/28 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
python 实现端口扫描工具
2020/12/18 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
Shell编程面试题
2016/05/29 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
2014年消防工作实施方案
2014/02/20 职场文书
员工安全责任书范本
2014/07/24 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
写给领导的感谢信
2015/01/22 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers