javascript基础学习系列四百一十三：DocumentFragment 类型

在所有节点类型中，DocumentFragment 类型是唯一一个在标记中没有对应表示的类型。DOM 将文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。
DocumentFragment 节点具有以下特征：

 nodeName 值为"#document-fragment"；
 nodeValue 值为 null；
 parentNode 值为 null；
 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。

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

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

假设想给这个

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

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()将所有列表项添加到了
  • 元素。此时，文档片段的子节点全部被转移到了
    • 元素。

假设想给这个

• 元素添加 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()将所有列表项添加到了
      • 元素。此时，文档片段的子节点全部被转移到了
        • 元素。 了 name 属性，因此就不用再设置了。随后，value 属性被赋值为"left"。为把这个新属性添加到元素上，可以使用元素的 setAttributeNode()方法。添加这个属性后，可以通过不同方式访问它，包括 attributes 属性、getAttributeNode()和 getAttribute()方法。其中，attributes 属性和getAttributeNode()方法都返回属性对应的 Attr 节点，而 getAttribute()方法只返回属性的值。