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 对象的所有子元素数量。

返回JavaScript导航

DocumentFragment 节点