关于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 表单的友好用户体现
Jan 07 Javascript
javascript parseInt 大改造
Sep 27 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
Angular 路由route实例代码
Jul 12 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue双向绑定数据限制长度的方法
Nov 04 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初学者头痛的十四个问题
2006/07/12 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
用jscript实现新建word文档
2007/06/15 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
vue-axios使用详解
2017/05/10 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
详解python之协程gevent模块
2018/06/14 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
学生违纪检讨书200字
2014/10/21 职场文书
爱的承诺书
2015/01/20 职场文书
初二物理教学反思
2016/02/19 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js