在所有节点类型中,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()方法只返回属性的值。
-
元素。此时,文档片段的子节点全部被转移到了
-
元素: ```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); ``` 这个例子先创建了一个文档片段,然后取得了