关于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 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
理解JS绑定事件
Jan 19 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
canvas实现弧形可拖动进度条效果
May 11 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
vue实现PC端分辨率适配操作
Aug 03 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
跟我学Laravel之快速入门
2014/10/15 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python常用库推荐
2016/12/04 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
详解Python sys.argv使用方法
2019/05/10 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
个人简历自我评价范文
2014/02/04 职场文书
陈欧广告词
2014/03/14 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
《月光曲》教学反思
2016/02/16 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL