JavaScript DOM 7 - DocumentFragment

Raaabbit 发布于2019-08-20 17:31 / 2152人阅读

摘要：它的用途主要是在使用时候，它作为一个临时容器。当我们把现有的上的一个节点插入给，这个节点会从原上被删掉。第一点和第二点主要是讲利用来进行操作在安全性和性能方面的优点。第三点也是它作为临时容器的一个优点，用完之后呢，会自己清空自己，不占内存。

在之前的文章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:


    book 1
    book 2

我们创建一个DocumentFragment，然后把第一个"

"给它做子节点：

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

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

在执行了上面的代码之后，原来的HTML就变成了：


        
    book 2

可以看到，我们把第一个"

"插入到了我们创建的DocumentFragment里面, 然后这个"

"就从原来的DOM里面消失了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83641.html

JavaScript笔记——常见DOM知识

摘要：前言本篇文章以介绍常见的节点知识元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。此外，还有一些方式可以获得相关的元素节点。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。前言本篇文章以介绍常见的DOM节点知识、DOM元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。才疏学浅，如有纰漏之处或建议欢迎留下评论。 Node节点首先，简单看看Node...

madthumb 2019-08-20 18:58 评论0 收藏0
DOM操作笔记

摘要：它实际上等于清除当前文档流，重新写入内容方法用于关闭方法所新建的文档。如果页面已经渲染完成关闭了，再调用方法，它会先调用方法，擦除当前文档所有内容，然后再写入我们的页面渲染的时候就会去打开一个文档流，当渲染绘制结束，就关闭这个文档流。一、DOM简介 1、定义： DOM 是 JavaScript 操作网页的接口，全称为文档对象模型（Document Object Model）。 2、作...

newtrek 2019-08-23 13:41 评论0 收藏0
前端优化-Javascript篇(4.DOM优化)

摘要：优化策略跟上面的大同小异，就是用局部变量缓存集合以及集合的长度，我就不进行实际测试了。例如错误的做法使用修改来进行优化如果需要动态修改，那么就使用批量处理操作并且让元素脱离文档流，等操作结束后再放回文档流中。上篇我介绍了Javascript标识符查找方面的优化，可以看出在这方面的优化给性能带来的提升并不明显，甚至可以说基本没有影响。但是，我今天要分享的是前端Javascript优化的...

Prasanta 2019-08-21 12:21 评论0 收藏0
DOM操作相关文章(持续更新中)

摘要：将返回匹配到的第一个元素，如果没有匹配的元素则返回。这是原生方法，比起速度快，缺点是不支持。推荐文章更快捷的操作的途径代码持续更新中 querySelector：选择相应的元素标签具有和jquery类似的写法用法： document.querySelector(div.test>p:first-child); document.querySelector(#test); （返回指定元素...

xioqua 2019-08-19 18:43 评论0 收藏0
个人常用JavaScript及React常用优化总结

摘要：插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合，它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作，有时是会产生视觉变化...

yuanxin 2019-08-20 15:07 评论0 收藏0