JS节点类型之DocumentFragment类型

DOM规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。

可以将文档片段作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。

看例子：

HTML中有如下代码：

<ol id="ol1"></ol>

假如我们想为这个<ol>元素添加3个列表项。如果逐个添加列表项，将会导致浏览器反复渲染（呈现）新信息。为避免这个问题可以像下面这样使用一个文档片段来保存创建的列表项，然后再一次性将它们添加到文档中。

//文档片段
var ol1 = document.getElementById("ol1"), li = null;
var fragment = document.createDocumentFragment();    //创建文档片段
for(var i=0; i < 5; i++){    //循环创建列表项
	li = document.createElement("li");
	li.appendChild(document.createTextNode("Item" + i));
	fragment.appendChild(li);    //列表项添加到文档片段中
}
ol1.appendChild(fragment);    //将文档片段添加到文档中
console.log(fragment.nodeValue);    //null

> 当文档片段添加到文档后，此时，文档片段的所有子节点都被删除并转移到了<ol>中。