关于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设置css属性的代码
Dec 28 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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/10/09 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue的for循环使用方法
2019/02/12 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python中字符串与编码示例代码
2019/05/20 Python
Pandas中resample方法详解
2019/07/02 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Django实现跨域的2种方法
2019/07/31 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
新任教师自我鉴定
2014/02/24 职场文书
社区活动策划方案
2014/08/21 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL
使用Python获取字典键对应值的方法
2022/04/26 Python