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