关于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面向对象之静态与非静态类
Feb 03 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
vue使用video插件vue-video-player详解
Oct 23 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
mysql+php分页类(已测)
2008/03/31 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php cli换行示例
2014/04/22 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
励志演讲稿200字
2014/08/21 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
总结会主持词
2015/07/02 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis
基于Python编写一个监控CPU的应用系统
2022/06/25 Python