documentFragment文档碎片

documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新
列如将ul里面的li取出放到documentFragment,更新完毕后再将其插入到ul,一共有以下四步骤:

    1. 创建documentFragment对象fragment
    2. 取出ul中的所有子节点并保存到fragment
    3. 更新fragment中的所有节点(li的内容)
    4. 将fragment插入到ul
      //初始显示test1
      <div id="test">
              <li>test1</li>
              <li>test1</li>
              <li>test1</li>
          </div>
      const ul = document.getElementById(test)
      // 创建fragment对象
      const fragment = document.createDocumentFragment()
      //  取出ul中的所有子节点并保存到fragment
      let child;
      while(child=ul.firstChild) {
        fragment.appendChild(child)
      }
      //更新fragment中的所有节点(li的内容)
      Array.prototype.slice.call(fragment.childNodes).forEach(node => {
        if (node.nodeType===1) {//取得元素节点
          node.textContent = test2 //重新赋值为test2
        }
      })
      // 将fragment插入到ul
      ul.appendChild(fragment)

      在fragment插入到ul之前页面不会更新,documentFragment用来批量更新元素

documentFragment文档碎片

上一篇:CSP 初赛


下一篇:自动化登录12306