关于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 日期常用的方法
Nov 11 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
分类解析jQuery选择器
Nov 23 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
js document.write()使用介绍
2014/02/21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python django model联合主键的例子
2019/08/06 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
监察建议书范文
2014/03/12 职场文书
专业见习报告范文
2014/11/03 职场文书
班级联欢会主持词
2015/07/03 职场文书
vue动态绑定style样式
2022/04/20 Vue.js