在所有节点类型中,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() 将所有列表项添加到了
-
元素。此时,文档片段的子节点全部被转移到了
- 元素。
-
元素。此时,文档片段的子节点全部被转移到了
-
元素: 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); 这个例子先创建了一个文档片段,然后取得了