关于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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 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
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python中异常捕获方法详解
2017/03/03 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python画折线图的程序
2018/07/26 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
pandas如何处理缺失值
2019/07/31 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python实现与redis交互操作详解
2020/04/21 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
初中英语课后反思
2014/04/25 职场文书
小学语文教研活动总结
2014/07/01 职场文书
目标责任书格式
2014/07/28 职场文书
西柏坡导游词
2015/02/05 职场文书
百家讲坛观后感
2015/06/12 职场文书
我的生日感言
2015/08/03 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers