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);
      }