JavaScript DOM 7 - DocumentFragment

2019年8月25日 109次阅读 来源: nanaistaken

在之前的文章JavaScript DOM 1里内里曾诠释过种种观点之前的关联，当时用了一张图，如下图：《JavaScript DOM 7 - DocumentFragment》

从这张图内里，我们能够看到 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内里消逝了

    原文作者：nanaistaken
    原文地址: https://segmentfault.com/a/1190000009912513
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞