关于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 相关文章推荐
Js中获取frames中的元素示例代码
Jul 30 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
vue中是怎样监听数组变化的
Oct 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
offsetParent 算法分析
2010/04/05 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python实现simhash算法实例
2014/04/25 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
为什么要有struct关键字
2012/05/08 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
财务会计应届生求职信
2013/11/24 职场文书
上班睡觉检讨书
2014/01/09 职场文书
高一地理教学反思
2014/01/18 职场文书
八一演出活动方案
2014/02/03 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
公司证明怎么写
2014/09/22 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL