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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
js实现随机8位验证码
Jul 24 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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正则表达匹配中文问题分析小结
2012/03/25 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
jQuery实现简单弹幕效果
2019/11/28 jQuery
Python实现的简单万年历例子分享
2014/04/25 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python redis 删除key脚本的实例
2019/02/19 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
高一生物教学反思
2014/01/17 职场文书
表彰先进的通报
2014/01/31 职场文书
护士毕业实习感言
2014/03/05 职场文书
海飞丝广告词
2014/03/20 职场文书
公司外出活动方案
2014/08/14 职场文书
观后感开头
2015/06/19 职场文书
红歌会主持词
2015/07/02 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
golang特有程序结构入门教程
2021/06/02 Python
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫