关于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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php时间戳转换的示例
2014/03/31 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
angular 服务随记小结
2019/05/06 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
经典安踏广告词
2014/03/21 职场文书
美术社团活动总结
2014/06/27 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
户籍证明格式
2014/09/15 职场文书
企业法人代表证明书
2014/09/27 职场文书
高中班主任评语
2014/12/30 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers