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里面消失了