-
createDocumentFragment()
方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。 -
DocumentFragment
节点不属于文档树,继承的parentNode
属性总是null。它有一个很实用的特点,当请求把一个DocumentFragment
节点插入文档树时,插入的不是DocumentFragment
自身,而是它的所有子孙节点,即插入的是括号里的节点。这个特性使得DocumentFragment
成了占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
另外,当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment
中,再统一将DocumentFragment
添加到页面,会减少页面渲染dom的次数,效率会明显提升。
-
如果使用
appendChid
方法将原dom树中的节点添加到DocumentFragment
中时,会删除原来的节点。 -
createDocumentFragment()
方法和createElement()
方法的区别:-
需要很多的插入操作和改动,继续使用类似于下面的代码则会很有问题
var ul = document.getElementById("ul"); for (var i = 0; i < 20; i++) { var li = document.createElement("li"); li.innerHTML = "index: " + i; ul.appendChild(li); }
由于每一次对文档的插入都会引起重新渲染(计算元素的尺寸,显示背景,内容等),所以进行多次插入操作使得浏览器发生了很多次渲染,效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因。一个优化的方法是将要创建的元素写到一个字符串上,然后一次性写到
innerHTML
上,这种利用浏览器对innerHTML
的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差,很难符合创建各种各样的DOM元素的需求。利用DocumentFragment
,可以弥补这两个方法的不足。
因为文档片段存在于内存中,并不在DOM中,所以将子元素插入到文档片段中时不会引起页面回流(对元素位置和几何上的计算),因此使用DocumentFragment
可以起到性能优化的作用。例如上面的代码就可以改成下面的片段。var ul = document.getElementById("ul"); var fragment = document.createDocumentFragment(); for (var i = 0; i < 20; i++) { var li = document.createElement("li"); li.innerHTML = "index: " + i; fragment.appendChild(li); } ul.appendChild(fragment);
-
createElement
创建的元素可以使用innerHTML
,createDocumentFragment
创建的元素使用innerHTML
并不能达到预期修改文档内容的效果,只是作为一个属性而已。两者的节点类型完全不同,
createElement
创建的是元素节点,节点类型为1,
createDocumentFragment
创建的是文档碎片,节点类型是11。并且createDocumentFragment
创建的元素在文档中没有对应的标记,因此在页面上只能用js中访问到。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #outer{ height: 200px; border: 1px solid #006400;} </style> </head> <body> <div id="outer"> </div> <input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/> <script type="text/javascript"> var fragment_1 = document.createDocumentFragment(); fragment_1.innerHTML = '<p>我是一个粉刷匠</p>'; document.body.appendChild(fragment_1); var fragment_2 = document.createElement('p'); fragment_2.innerHTML = '粉刷本领强'; document.body.appendChild(fragment_2); </script> </body> </html>
-
createElement
创建的元素可以重复操作,添加之后就算从文档里面移除依旧归文档所有,可以继续操作,但是createDocumentFragment
创建的元素是一次性的,添加之后再就不能操作了(说明:这里的添加并不是添加了新创建的片段,因为上面说过,新创建的片段在文档内是没有对应的标签的,这里添加的是片段的所有子节点)。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #outer{ height: 200px; border: 1px solid #006400;} </style> </head> <body> <div id="outer"> </div> <input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var outer = $('outer'); var inner = $('inner'); $('btn_1').onclick = function(){ var div = document.createElement('div'); div.innerHTML = '<p>测试createElement</p>'; document.body.appendChild(div); setTimeout(function(){ outer.appendChild(div); setTimeout(function(){ outer.removeChild(div); },1000) },1000) } $('btn_2').onclick = function(){ var p = document.createElement('p'); p.innerHTML = '测试DocumentFragment'; var fragment = document.createDocumentFragment(); fragment.appendChild(p); fragment.innerHTML = '<p>测试DocumentFragment</p>'; fragment.innerHTML = '<span>测试DocumentFragment</span>'; document.body.appendChild(fragment); setTimeout(function(){ outer.appendChild(fragment);//报错,因为此时文档内部已经能够不存在fragment了 setTimeout(function(){ outer.removeChild(fragment); },1000) },1000) } </script> </body> </html>
-
通过
createElement
新建元素必须指定元素tagName
,因为其可用innerHTML
添加子元素。通过createDocumentFragment
则不必。 -
通过
createElement
创建的元素插入文档后,还可以取到创建时的返回值,即上面例子中createElement
还是创建的那个div
元素,而createDocumentFragment
创建的元素插入到文档后,就不能访问创建时的返回值了,相当于把自己创建的文档片段直接挪到文档中了。
-
-
createDocumentFragment()
方法和createElement()
方法的共同点:- 添加子元素后返回值都是新添加的子元素,因此,可通过下面的方法利用
innerHTML
为createDocumentFragment
添加子元素:var fragment = document.createDocumentFragment(); var ret = fragment.appendChild(document.createElement('div')); ret.innerHTML = 'by innerHTML '; test1.appendChild(fragment);
- 都可以通过
appendChild
添加子元素,且子元素必须是node
类型,不能为文本。 - 若添加的子元素是文档中存在的元素,则通过
appendChild
在为其添加子元素时,会从文档中删除之前存在的元素。
- 添加子元素后返回值都是新添加的子元素,因此,可通过下面的方法利用
-
DocumentFragment
是没有父节点的最小的文档对象,用于存储HTML和XML片段。DocumentFragment
对象继承Node
,所以它有Node
的所有属性方法,完全可以操作Node(NodeList)
那样操作DocumentFragment
。此外W3C对DocumentFragment
也定义了一些另外的属性和方法,但是由于多数浏览器都没有实现,从兼容性上来说不推荐使用这些属性。具体有哪些属性方法可以参考MDN说明。
创建DocumentFragment
的方法有两种,document.createDocumentFragment()
和new Fragment()
。对于document.createDocumentFragment()
,所有浏览器都支持(包括IE6),而构造函数方法就不是所有浏览器都有效了(IE没有实现该方法)。所以从兼容性上来说推荐使用document.createDocumentFragment()
。