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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
原生JavaScript实现五子棋游戏
Nov 09 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
解析php5配置使用pdo
2013/07/03 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
基于javascript的拖拽类封装详解
2019/04/19 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Python 通过URL打开图片实例详解
2017/06/01 Python
关于Python数据结构中字典的心得
2017/12/04 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python创建数字列表的示例
2019/11/28 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
项目考察欢迎辞
2014/01/17 职场文书
工会主席岗位责任制
2014/02/11 职场文书
外国人聘用意向书
2014/04/01 职场文书
作文批改评语大全
2014/04/23 职场文书
工作鉴定评语
2014/05/04 职场文书
学校运动会报道稿
2014/09/23 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
六年级作文之预言作文
2019/10/25 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
利用Python+OpenCV三步去除水印
2021/05/28 Python