documentFragment深入理解

2022-08-01 00:31:39 阅读：219 来源： 互联网

标签：test1 fragment 更新 ul 理解深入 documentFragment 节点

documentFragment深入理解

抽疯的稻草绳 0.4482020.12.27 16:42:40字数 178阅读 3,225

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用来批量更新元素

3人点赞 Dom

标签：test1,fragment,更新,ul,理解,深入,documentFragment,节点
来源： https://www.cnblogs.com/sexintercourse/p/16538720.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

documentFragment深入理解

documentFragment深入理解