(89)Wangdao.com第二十二天_JavaScript DocumentFragment 節點

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