DocumentFragment 节点
DocumentFragment
节点代表一个文档的片段,本身就是一个完整的 DOM 树形结构。它没有父节点,parentNode
返回null
,但是可以插入任意数量的子节点。它不属于当前文档,操作DocumentFragment
节点,要比直接操作 DOM 树快得多。
它一般用于构建一个 DOM 结构,然后插入当前文档。document.createDocumentFragment
方法,以及浏览器原生的DocumentFragment
构造函数,可以创建一个空的DocumentFragment
节点。然后再使用其他 DOM 方法,向其添加子节点。
var docFrag = document.createDocumentFragment(); // 等同于 var docFrag = new DocumentFragment(); var li = document.createElement('li'); li.textContent = 'Hello World'; docFrag.appendChild(li); document.querySelector('ul').appendChild(docFrag);
上面代码创建了一个DocumentFragment
节点,然后将一个li
节点添加在它里面,最后将DocumentFragment
节点移动到原文档。
注意,DocumentFragment
节点本身不能被插入当前文档。当它作为appendChild()
、insertBefore()
、replaceChild()
等方法的参数时,是它的所有子节点插入当前文档,而不是它自身。一旦DocumentFragment
节点被添加进当前文档,它自身就变成了空节点(textContent
属性为空字符串),可以被再次使用。如果想要保存DocumentFragment
节点的内容,可以使用cloneNode
方法。
document .querySelector('ul') .appendChild(docFrag.cloneNode(true));
上面这样添加DocumentFragment
节点进入当前文档,不会清空DocumentFragment
节点。
下面是一个例子,使用DocumentFragment
反转一个指定节点的所有子节点的顺序。
function reverse(n) { var f = document.createDocumentFragment(); while(n.lastChild) f.appendChild(n.lastChild); n.appendChild(f); }
DocumentFragment
节点对象没有自己的属性和方法,全部继承自Node
节点和ParentNode
接口。也就是说,DocumentFragment
节点比Node
节点多出以下四个属性。
children
:返回一个动态的HTMLCollection
集合对象,包括当前DocumentFragment
对象的所有子元素节点。firstElementChild
:返回当前DocumentFragment
对象的第一个子元素节点,如果没有则返回null
。lastElementChild
:返回当前DocumentFragment
对象的最后一个子元素节点,如果没有则返回null
。childElementCount
:返回当前DocumentFragment
对象的所有子元素数量。