DocumentFragment文档碎片

语法 let fragment = document.createDocumentFragment();

描述 DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流。

可以相关连节点操作这篇文章一起看，这样跟容易看明白
https://blog.csdn.net/Frazier1995/article/details/116005561

以下是个简单的使用小案例

    <ul id="ulBox">
      <li>嘿嘿嘿</li>
      <li>嘿嘿嘿</li>
      <li>嘿嘿嘿</li>
      <li>嘿嘿嘿</li>
    </ul>

  let ul = document.getElementById("ulBox"); //获取ul元素
  console.log(ul.childNodes); //查看ul所有子节点

  let fragment = document.createDocumentFragment(); //创建碎片文档

  while (ul.firstChild) { //text
    fragment.appendChild(ul.firstChild); //循环添加到文档碎片里
  }

  //转数组之后循环
  Array.from(fragment.childNodes).forEach((item) => {
     //如果类型为1的话 就替换
    if (item.nodeType == 1) {
      item.innerHTML = "好了";
    }
  });

  ul.appendChild(fragment); //把碎片文档赋值给 ul