关于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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
prototype1.4中文手册
Sep 22 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
Node.js的包详细介绍
Jan 14 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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的explode和implode的使用说明
2011/07/17 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php筛选不存在的图片资源
2015/04/28 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Flask-Mail用法实例分析
2018/07/21 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python集合是否可变总结
2019/06/20 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python cumsum函数的具体使用
2019/07/29 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
党风廉设责任书
2014/04/16 职场文书
数字化校园建设方案
2014/05/03 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
话题作文之呼唤
2019/12/18 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python