关于javascript document.createDocumentFragment()


Posted in Javascript onApril 04, 2009

他支持以下DOM2方法:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2?傩?
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以??ocumentFragment 作?橐????担?ū热?ode的 appendChild和insertBefore 方法),??樱?ragment 就可以被追加到父?ο笾小
Example:

var frag = document.createDocumentFragment(); 
frag.appendChild(document.createTextNode('Ipsum Lorem')); 
document.body.appendChild(frag);

document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
var oui=document.getElementById("oItem"); 
for(var i=0;i<10;i++) 
{ 
var oli=document.createElement("li"); 
oui.appendChild(oli); 
oli.appendChild(document.createTextNode("Item"+i)); 
}

上面的代码在循环中调用了oui.appendChild(oli),每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点,也要更新页面。所以一共要更新页面20次。
为了页面的优化,我们要尽量减少DOM的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatDocumentFragment(),代码如下:
var oui=document.getElementById("oItem"); 
var oFragment=document.createDocumentFragment(); 
for(var i=0;i<10;i++){ 
var oli=document.createElement("li"); 
oli.appendChild(document.createTextNode("Item"+i)); 
oFragment.appendChild(oli); 
} 
oui.appendChild(oFragment);

W3C参考:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A3
-------------------------------------------
DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document's tree or to create a new fragment of a document. Imagine implementing a user command like cut or rearranging a document by moving fragments around. It is desirable to have an object which can hold such fragments and it is quite natural to use a Node for this purpose. While it is true that a Document object could fulfill this role, a Document object can potentially be a heavyweight object, depending on the underlying implementation. What is really needed for this is a very lightweight object. DocumentFragment is such an object.

Furthermore, various operations -- such as inserting nodes as children of another Node -- may take DocumentFragment objects as arguments; this results in all the child nodes of the DocumentFragment being moved to the child list of this node.

The children of a DocumentFragment node are zero or more nodes representing the tops of any sub-trees defining the structure of the document. DocumentFragment nodes do not need to be well-formed XML documents (although they do need to follow the rules imposed upon well-formed XML parsed entities, which can have multiple top nodes). For example, a DocumentFragment might have only one child and that child node could be a Text node. Such a structure model represents neither an HTML document nor a well-formed XML document.

When a DocumentFragment is inserted into a Document (or indeed any other Node that may take children) the children of the DocumentFragment and not the DocumentFragment itself are inserted into the Node. This makes the DocumentFragment very useful when the user wishes to create nodes that are siblings; the DocumentFragment acts as the parent of these nodes so that the user can use the standard methods from the Node interface, such as insertBefore and appendChild.

Javascript 相关文章推荐
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 #Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 #Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 #Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 #Javascript
js Flash插入函数免激活代码
Mar 31 #Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 #Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 #Javascript
You might like
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
ajax与302响应代码测试
2013/10/23 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python检索特定内容的文本文件实例
2018/06/05 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
致百米运动员广播稿
2014/01/29 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
热血教师观后感
2015/06/10 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
go类型转换及与C的类型转换方式
2021/05/05 Golang
Redis实现一个账号只能登录一个设备
2022/04/19 Redis