documentFragment深入理解

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新
列如将ul里面的li取出放到documentFragment,更新完毕后再将其插入到ul,一共有以下四步骤：

创建documentFragment对象fragment
取出ul中的所有子节点并保存到fragment
更新fragment中的所有节点（li的内容）
将fragment插入到ul

//初始显示test1
<div id="test"><li>test1</li><li>test1</li><li>test1</li></div>

const ul = document.getElementById('test')
// 创建fragment对象
const fragment = document.createDocumentFragment()
//  取出ul中的所有子节点并保存到fragment
let child;
while(child=ul.firstChild) {fragment.appendChild(child)
}
//更新fragment中的所有节点（li的内容）
Array.prototype.slice.call(fragment.childNodes).forEach(node => {if (node.nodeType===1) {//取得元素节点node.textContent = 'test2' //重新赋值为test2}
})
// 将fragment插入到ul
ul.appendChild(fragment)

在fragment插入到ul之前页面不会更新，documentFragment用来批量更新元素

转载于:https://www.cnblogs.com/yuanchao-blog/p/10847417.html

documentFragment深入理解相关推荐

javascrpt知识要点梳理——知识清单
写在前面: 这篇文章是我在学习<javascript高级程序设计(第三版)>时随书所做的笔记,由于使用word记录的笔记,转到markdown编辑器里有点吃力,所以文章排版可能会有点问题. ...
关于documentFrgament 文档片段的简单理解
documentFragment 即文档片段,也可以理解为是一个暂时储存数据的仓库. 好处: 可以将多行代码一次性的放到文档中,减少页面的渲染次数,用于提高创建时的性能问题.使用不多,可做了解使用 ...
理解Shadow DOM
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
记一次对vue双向绑定的理解
之前有看过一次vue双向绑定原理实现相关的博客,看得似懂非懂的,然后也就搁浅了. 昨天脑海里又突然燃起了要不这块搞懂的冲动,于是乎又开始了一轮博客轰炸,综合研究了多位大神写得关于vue双向绑定的实现原 ...
通用解题法——回溯算法（理解+练习）
积累算法经验,积累解题方法--回溯算法,你必须要掌握的解题方法! 什么是回溯算法呢? 回溯算法实际上一个类似枚举的搜索尝试过程,主要是在搜索尝试过程中寻找问题的解,当发现已不满足求解条件时,就&quo ...
stream流对象的理解及使用
我的理解:用stream流式处理数据,将数据用一个一个方法去 . (点,即调用) 得到新的数据结果,可以一步达成. 有多种方式生成 Stream Source: 从 Collection 和数组 Co ...
Linux shell 学习笔记（11）— 理解输入和输出（标准输入、输出、错误以及临时重定向和永久重定向）
1. 理解输入和输出 1.1 标准文件描述符 Linux 系统将每个对象当作文件处理.这包括输入和输出进程.Linux 用文件描述符(file descriptor)来标识每个文件对象.文件描述符是一 ...
java局部变量全局变量,实例变量的理解
java局部变量全局变量,实例变量的理解局部变量可以理解为写在方法中的变量. public class Variable {//类变量static String name = "小明&q ...
智能文档理解:通用文档预训练模型
预训练模型到底是什么,它是如何被应用在产品里,未来又有哪些机会和挑战? 预训练模型把迁移学习很好地用起来了,让我们感到眼前一亮.这和小孩子读书一样,一开始语文.数学.化学都学,读书.网上游戏等,在脑子 ...

documentFragment深入理解

documentFragment深入理解相关推荐

最新文章

热门文章