关于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预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
javaScript基础详解
Jan 19 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
香妃
2021/03/03 冲泡冲煮
模拟xcopy的函数
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
node.js入门教程
2014/06/01 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
低版本中Python除法运算小技巧
2015/04/05 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
党支部书记先进事迹
2014/01/17 职场文书
小学语文国培感言
2014/03/04 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
CentOS MySql8 远程连接实战
2022/04/19 MySQL