DocumentFragment类型

DocumentFragment 类型是唯一一个在标记中没有对应表示的类型。DOM 将 文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。
DocumentFragment 节点具有以下特征:
(1) nodeType 等于 11;
(2) nodeName 值为"#document-fragment";
(3) nodeValue 值为 null;
(4) parentNode 值为 null;
(5) 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。

不能直接把文档片段添加到文档。相反，文档片段的作用是充当其他要被添加到文档的节点的仓库。
可以使用 document.createDocumentFragment()方法像下面这样创建文档片段:

let fragment = document.createDocumentFragment();

文档片段从 Node 类型继承了所有文档类型具备的可以执行 DOM 操作的方法。如果文档中的一个 节点被添加到一个文档片段，则该节点会从文档树中移除，不会再被浏览器渲染。添加到文档片段的新 节点同样不属于文档树，不会被浏览器渲染。可以通过 appendChild()或 insertBefore()方法将文 档片段的内容添加到文档。在把文档片段作为参数传给这些方法时，这个文档片段的所有子节点会被添 加到文档中相应的位置。文档片段本身永远不会被添加到文档树。以下面的 HTML 为例:

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

假设想给这个<ul>元素添加 3 个列表项。如果分 3 次给这个元素添加列表项，浏览器就要重新渲染 3 次页面，以反映新添加的内容。为避免多次渲染，下面的代码示例使用文档片段创建了所有列表项， 然后一次性将它们添加到了<ul>元素:

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

这个例子先创建了一个文档片段，然后取得了<ul>元素的引用。接着通过 for 循环创建了 3 个列表 项，每一项都包含表明自己身份的文本。为此先创建<li>元素，再创建文本节点并添加到该元素。然后 通过 appendChild()把<li>元素添加到文档片段。循环结束后，通过把文档片段传给 appendChild() 将所有列表项添加到了<ul>元素。此时，文档片段的子节点全部被转移到了<ul>元素。