关于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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
PHP 的 __FILE__ 常量
2007/01/15 PHP
重新认识php array_merge函数
2014/08/31 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
js选择器全面解析
2016/06/27 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python生成n个元素的全组合方法
2018/11/13 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python 实现汉诺塔游戏
2020/11/28 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
商务助理岗位职责
2013/11/13 职场文书
企业给企业的表扬信
2014/01/13 职场文书
趣味体育活动方案
2014/02/08 职场文书
优秀党员获奖感言
2014/02/18 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
Python机器学习之KNN近邻算法
2021/05/14 Python
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS