JavaScript DOM 7 - DocumentFragment

在以前的文章JavaScript DOM 1裏裏面曾解釋過各類概念以前的關係，當時用了一張圖，以下圖：

從這張圖裏面，咱們能夠看到 DocumentFragment 和 Document 是兄弟關係，都直接繼承自Node類。
DocumentFragment是一種十分特殊的Node,它和Document同樣沒有parentNode. 它能夠有後代節點，也可使用appendChild()這類的方法。它的用途主要是在使用appendChild(), insertBefore(), replaceChild()時候，它做爲一個臨時容器。
先來看一下怎麼建立一個DocumentFragment：

1: document.createDocumentFragment()

var df = document.createDocumentFragment();

雖然DocumentFragment在級別上和Document處於同一層，可是建立的時候，仍是在document上調用方法。

那咱們如今來看一看它的特殊之處：

1: DocumentFragment它並不屬於DOM結構的一部分，因此任何對DocumentFragment的操做，不會影響到DOM

2: 當咱們給appendChild(), insertBefore(), replaceChild()等傳入一個DocumentFragment的時候，是把DocumentFragment的全部子節點一次性地插入，而不是DocumentFragment自己

3: 當咱們把DocumentFragment插入到別的節點以後，DocumentFragment的子節點會自動被清空。

4: 當咱們把現有的DOM上的一個節點插入給DocumentFragment，這個節點會從原DOM上被刪掉。

第一點和第二點主要是講利用DocumentFragment來進行DOM操做在安全性和性能方面的優勢。第三點也是它做爲臨時容器的一個優勢，用完以後呢，會本身清空本身，不佔內存。特別要注意的是第四點，還挺出乎我意料的，我就第四點來作一個實驗：
仍是咱們的老朋友HTML:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul>

咱們建立一個DocumentFragment，而後把第一個'<li>'給它作子節點：

var bookList = document.getElementsByClassName('bookList')[0];
var firstLi = bookList.firstElementChild;

var df = document.createDocumentFragment();
df.appendChild(firstLi);

在執行了上面的代碼以後，原來的HTML就變成了：

<ul class="bookList">
        
    <li class="bookItem">book 2</li>
</ul>

能夠看到，咱們把第一個'<li>'插入到了咱們建立的DocumentFragment裏面, 而後這個'<li>'就從原來的DOM裏面消失了