关于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实现面向对象类的功能书写技巧
Mar 07 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
JS实现公告上线滚动效果
Jan 10 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
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
制作特殊字的脚本
2006/06/26 Javascript
FCK调用方法..
2006/12/21 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
canvas绘制多边形
2017/02/24 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
网络工程师的自我评价
2013/10/02 职场文书
应届生污水处理求职信
2013/11/06 职场文书
电气技术员岗位职责
2013/11/19 职场文书
安卓程序员求职信
2014/02/28 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
活动倡议书范文
2014/05/13 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
感谢信怎么写
2015/01/21 职场文书
倡议书范文大全
2015/04/28 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL