MDN :DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为 DocumentFragment 不是真实DOM树的一部分，它的变化不会触发 DOM 树的（重新渲染) ，且不会导致性能等问题。
利用这个容器可以实现在内存中编辑DOM片段，完成后再插入到真实DOM中，达到减少真实DOM操作，减少DOM树刷新 和 视图渲染的成本
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
/* documentFragment是内存中保存DOM的容器，
利用这个容器可以实现在内存中编辑DOM片段，完成后再插入到真实DOM中，
达到减少真实DOM操作，减少真实DOM刷新 和 视图渲染的成本 */
let fragment = document.createDocumentFragment();
let ulDOM = document.getElementsByTagName('ul')[0];
let lisDOMs = document.getElementsByTagName('li');
// 循环取出ul下的所有子节点，抛入fragment容器
let child;
while(child = ulDOM.firstChild){
fragment.appendChild(child);
}
// 更新fragment中所有子节点的文本
console.log(fragment.childNodes);
// log: NodeList(7) [text, li, text, li, text, li, text]
// 可以看出元素节点之间掺杂着文本节点
console.log(fragment.childNodes instanceof Array);
// log: false
// childNodes也是一个伪数组
// 在内存中遍历节点并修改元素节点中的文本
Array.from(fragment.childNodes).forEach((node)=>{
if (node.nodeType === 1) {
node.innerText = "hello world";
}
});
ulDOM.appendChild(fragment);
</script>
