JavaScript学习：节点类型之DocumentFragment类型

DocumentFragment的使用可以防止浏览器反复渲染

在所有节点类型中，只有 DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段 （document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。DocumentFragment 节点具有下列特征：

 nodeType 的值为 11；

 nodeName 的值为"#document-fragment"；

 nodeValue 的值为 null；

 parentNode 的值为 null；

 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference。

虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段，可以使用 document.createDocumentFragment()方 法，如下所示： 

var fragment = document.createDocumentFragment(); 

文档片段继承了 Node 的所有方法，通常用于执行那些针对文档的 DOM操作。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过 appendChild()或 insertBefore()将文档片段中内容添 加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段的所有子节点添加到 相应位置上；文档片段本身永远不会成为文档树的一部分。来看下面的 HTML示例代码： 

<ul id="myList"></ul> 

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

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null; 
 
for (var i=0; i < 3; i++){    
 li = document.createElement("li");     
 li.appendChild(document.createTextNode("Item " + (i+1)));     
 fragment.appendChild(li); 
} 
 
ul.appendChild(fragment);   

在这个例子中，我们先创建一个文档片段并取得了对<ul>元素的引用。然后，通过 for 循环创建 3个列表项，并通过文本表示它们的顺序。为此，需要分别创建<li>元素、创建文本节点，再把文本节点添加到<li>元素。接着使用 appendChild()将<li>元素添加到文档片段中。循环结束后，再调用 appendChild()并传入文档片段，将所有列表项添加到<ul>元素中。此时，文档片段的所有子节点都被删除并转移到了<ul>元素中。 

内容来自《JavaScript高级程序设计（第3版）》