javascript基础学习系列五百一十八：DocumentFragment 类型

在所有节点类型中，DocumentFragment 类型是唯一一个在标记中没有对应表示的类型。DOM将
文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。
DocumentFragment 节点具有以下特征：
 nodeType 等于11；
 nodeName 值为"#document-fragment"；
 nodeValue 值为null；
 parentNode 值为null；
 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection 或
EntityReference。
不能直接把文档片段添加到文档。相反，文档片段的作用是充当其他要被添加到文档的节点的仓库。
可以使用document.createDocumentFragment()方法像下面这样创建文档片段：
let fragment = document.createDocumentFragment();
文档片段从Node 类型继承了所有文档类型具备的可以执行DOM操作的方法。如果文档中的一个
节点被添加到一个文档片段，则该节点会从文档树中移除，不会再被浏览器渲染。添加到文档片段的新
节点同样不属于文档树，不会被浏览器渲染。可以通过appendChild()或insertBefore()方法将文
档片段的内容添加到文档。在把文档片段作为参数传给这些方法时，这个文档片段的所有子节点会被添
加到文档中相应的位置。文档片段本身永远不会被添加到文档树。以下面的HTML 为例：

假设想给这个

• 元素添加3 个列表项。如果分3 次给这个元素添加列表项，浏览器就要重新渲染 3 次页面，以反映新添加的内容。为避免多次渲染，下面的代码示例使用文档片段创建了所有列表项， 然后一次性将它们添加到了
  • 元素： 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); 这个例子先创建了一个文档片段，然后取得了
    • 元素的引用。接着通过for 循环创建了3 个列表 项，每一项都包含表明自己身份的文本。为此先创建
    • 元素，再创建文本节点并添加到该元素。然后 通过appendChild()把
    • 元素添加到文档片段。循环结束后，通过把文档片段传给appendChild() 将所有列表项添加到了
      • 元素。此时，文档片段的子节点全部被转移到了
        • 元素。