DocumentFragment

最新推荐文章于 2024-05-13 17:26:34 发布

guokanglun

最新推荐文章于 2024-05-13 17:26:34 发布

阅读量610

点赞数 2

分类专栏： JavaScript基础知识

本文链接：https://blog.csdn.net/gklcsdn/article/details/110386396

版权

JavaScript基础知识专栏收录该内容

40 篇文章 0 订阅

订阅专栏

文章目录

- - - - 1. 描述
      - 2. 使用

1. 描述

DocumentFragments 是DOM节点。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

减少页面重绘

2. 使用

例：修改所有li的内容

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li> test1 </li>
    <li> test2 </li>
    <li> test3 </li>
  </ul>

  <script>
    const ul = document.getElementsByTagName('ul')[0];
    const li = document.getElementsByTagName('li');
    
    // 创建fragment
    const fragment = document.createDocumentFragment();
    
    // 取出所有li到fragment
    [...li].forEach(li=>{
        fragment.appendChild(li)
    });
  
    // 更新fragment里所有li的文本
    [...fragment.children].forEach(li=>{
        li.innerText = 'baidu'
    });
  
    // 将fragment插入ul
    ul.appendChild(fragment)
    
  </script>
</body>
</html>