(89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

Posted 2021-01-16 我即狂澜，且力不可挽

DocumentFragment 节点

代表一个文档的片段，本身就是一个完整的 DOM 树形结构。

它没有父节点，.parentNode 返回 null

可以插入任意数量的子节点。

不属于当前文档，操作 DocumentFragment 节点，要比直接操作 DOM 树快得多

一般用于构建一个 DOM 结构，然后插入当前文档

 

• 创建一个空的 DocumentFragment 节点

 

• • var docFrag = document.createDocumentFragment();

// 等同于

• • var docFrag = new DocumentFragment();

 

 

 

 

• 然后再使用其他 DOM 方法，向其添加子节点

  • var li = document.createElement(‘li‘);
    li.textContent = ‘Hello World‘;
    docFrag.appendChild(li);

 

• 最后插入当前文档

  • document.querySelector(‘ul‘).appendChild(docFrag);

 

• • 注意：DocumentFragment 节点本身不能被插入当前文档
    • 当它作为 appendChild()、insertBefore()、replaceChild() 等方法的参数时
      • 是它的所有子节点插入当前文档，而不是它自身
      • 一旦 DocumentFragment 节点被添加进当前文档，它自身就变成了空节点（textContent属性为空字符串），可以被再次使用。

 

• • 如果想要保存 DocumentFragment 节点的内容，可以使用 cloneNode 方法

    • document.queryselector(‘ul‘).appendChild(docFrag.cloneNode(true));

 

• • 实例

    • // 反转一个指定节点的所有子节点的顺序
      function reverse(ele) {
          var docFrag = document.createDocumentFragment();
          
          while(ele.lastChild){
              docFrag.appendChild(ele.lastChild);
          }
          ele.appendChild(docFrag);
      }