createElement与createDocumentFragment的点点区别小结


Posted in Javascript onDecember 19, 2011

网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题,比如:

var arrText=["1","2","3","4","5","6","7","8","9","10"]; 
for(var i=0;i<arrText.length;i++){ 
var op=document.createElement("P"); 
var oText=document.createTextNode(arrText[i]); 
op.appendChild(oText); 
document.body.appendChild(op); 
} 
var arrText=["1","2","3","4","5","6","7","8","9","10"]; 
var oFrag=document.createDocumentFragment(); 
for(var i=0;i<arrText.length;i++){ 
var op=document.createElement("P"); 
var oText=document.createTextNode(arrText[i]); 
op.appendChild(oText); 
oFrag.appendChild(op); 
} 
document.body.appendChild(oFrag);

(声明:这是我google的第一个例子,并不代表对原作者有任何意见,原文地址http://www.cnitblog.com/asfman/articles/32614.html)
这个说法并没有错,但是并不严谨,因为像这种用法,主要还是用在目标节点是已存在并且有一部分内容的情况下,比如上面例子中的body元素,如果目标节点并不存在或者为空,完全可以用createElement创建一个相同的元素,操作之后再使用一次appendChild或者replaceChild来达到相同的目的,这样也不存在重复刷新的问题。
虽说我平时都是把两者混着用,但是还是得明白两者之间的一点区别:
第一:
createElement创建的元素可以使用innerHTML,createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果,只是作为一个属性而已。两者的节点类型完全不同,并且createDocumentFragment创建的元素在文档中没有对应的标记,因此在页面上只能用js中访问到。
demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
#outer{ height: 200px; border: 1px solid #006400;} 
</style> 
</head> 
<body> 
<div id="outer"> 
</div> 
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/> 
<script type="text/javascript"> 
var fragment_1 = document.createDocumentFragment(); 
fragment_1.innerHTML = '<p>我是一个粉刷匠</p>'; 
document.body.appendChild(fragment_1); 
var fragment_2 = document.createElement('p'); 
fragment_2.innerHTML = '粉刷本领强'; 
document.body.appendChild(fragment_2); 
</script> 
</body> 
</html>

第二:另一个最主要的区别就是createElement创建的元素可以重复操作,添加之后就算从文档里面移除依旧归文档所有,可以继续操作,但是createDocumentFragment创建的元素是一次性的,添加之后再就不能操作了(说明:这里的添加并不是添加了新创建的片段,因为上面说过,新创建的片段在文档内是没有对应的标签的,这里添加的是片段的所有子节点)。
一个对比的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
#outer{ height: 200px; border: 1px solid #006400;} 
</style> 
</head> 
<body> 
<div id="outer"> 
</div> 
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/> 
<script type="text/javascript"> 
function $(id){ 
return document.getElementById(id); 
} 
var outer = $('outer'); 
var inner = $('inner'); 
$('btn_1').onclick = function(){ 
var div = document.createElement('div'); 
div.innerHTML = '<p>测试createElement</p>'; 
document.body.appendChild(div); 
setTimeout(function(){ 
outer.appendChild(div); 
setTimeout(function(){ 
outer.removeChild(div); 
},1000) 
},1000) 
} 
$('btn_2').onclick = function(){ 
var p = document.createElement('p'); 
p.innerHTML = '测试DocumentFragment'; 
var fragment = document.createDocumentFragment(); 
fragment.appendChild(p); 
fragment.innerHTML = '<p>测试DocumentFragment</p>'; 
fragment.innerHTML = '<span>测试DocumentFragment</span>'; 
document.body.appendChild(fragment); 
setTimeout(function(){ 
outer.appendChild(fragment);//报错,因为此时文档内部已经能够不存在fragment了 
setTimeout(function(){ 
outer.removeChild(fragment); 
},1000) 
},1000) 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
jQuery版仿Path菜单效果
Dec 15 #Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
基于django传递数据到后端的例子
2019/08/16 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
摄影专业毕业生求职信
2014/03/13 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
关于感谢信的范文
2015/01/23 职场文书
避暑山庄导游词
2015/02/04 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
贪污检举信范文
2015/03/02 职场文书
药品开票员岗位职责
2015/04/15 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS