JavaScript DOM 7 - DocumentFragment

Raaabbit 發(fā)布于2019-08-20 17:31 / 2183人閱讀

摘要：它的用途主要是在使用時候，它作為一個臨時容器。當我們把現(xiàn)有的上的一個節(jié)點插入給，這個節(jié)點會從原上被刪掉。第一點和第二點主要是講利用來進行操作在安全性和性能方面的優(yōu)點。第三點也是它作為臨時容器的一個優(yōu)點，用完之后呢，會自己清空自己，不占內(nèi)存。

在之前的文章JavaScript DOM 1里里面曾解釋過各種概念之前的關(guān)系，當時用了一張圖，如下圖：

從這張圖里面，我們可以看到 DocumentFragment 和 Document 是兄弟關(guān)系，都直接繼承自Node類。
DocumentFragment是一種十分特殊的Node,它和Document一樣沒有parentNode. 它可以有后代節(jié)點，也可以使用appendChild()這類的方法。它的用途主要是在使用appendChild(), insertBefore(), replaceChild()時候，它作為一個臨時容器。
先來看一下怎么創(chuàng)建一個DocumentFragment：

1: document.createDocumentFragment()

 var df = document.createDocumentFragment();

雖然DocumentFragment在級別上和Document處于同一層，但是創(chuàng)建的時候，還是在document上調(diào)用方法。

那我們現(xiàn)在來看一看它的特殊之處：

1: DocumentFragment它并不屬于DOM結(jié)構(gòu)的一部分，所以任何對DocumentFragment的操作，不會影響到DOM

2: 當我們給appendChild(), insertBefore(), replaceChild()等傳入一個DocumentFragment的時候，是把DocumentFragment的所有子節(jié)點一次性地插入，而不是DocumentFragment本身

3: 當我們把DocumentFragment插入到別的節(jié)點之后，DocumentFragment的子節(jié)點會自動被清空。

4: 當我們把現(xiàn)有的DOM上的一個節(jié)點插入給DocumentFragment，這個節(jié)點會從原DOM上被刪掉。

第一點和第二點主要是講利用DocumentFragment來進行DOM操作在安全性和性能方面的優(yōu)點。第三點也是它作為臨時容器的一個優(yōu)點，用完之后呢，會自己清空自己，不占內(nèi)存。特別要注意的是第四點，還挺出乎我意料的，我就第四點來做一個實驗：
還是我們的老朋友HTML:


    book 1
    book 2

我們創(chuàng)建一個DocumentFragment，然后把第一個"

"給它做子節(jié)點：

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

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

在執(zhí)行了上面的代碼之后，原來的HTML就變成了：