javasript之DOM优化

最新推荐文章于 2024-06-29 03:15:05 发布

㼛思雨

最新推荐文章于 2024-06-29 03:15:05 发布

阅读量125

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45147894/article/details/109091872

版权

Javascript 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

在所有的节点类型中只有DocumentFragment在文档中没有对应的标签，DOM规定文档片段是一种“轻量级”的文档。可以包含和控制节点，但不会像完整的文档那样占用额外的资源。不能把文档片段直接添加到文档中，但可以将它作为一个仓库来使用，在里面保存将来可能添加到文档中的节点。创建文档片段的方法：document.createDocumentFragment();

如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，浏览器中也不再显示这些节点，添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild（）方法或insertBefore()方法将文档片段中的内容添加到文档中。

在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段的所有子节点添加到相应的位置上，文档片段本身永远不会成为文档树的一部分。以下面代码为例：如果逐个地添加列表项，将导致浏览器反复渲染新信息。使用一个文档片段来保存创建的列表项，最后一次性地将它们添加到文档中，就可以完美的避开反复渲染的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-widthh, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>
  <ul id="mylist"></ul>
           
    <script>
    var fragment=document.createDocumentFragment();    //创建文档片段
    var  ul=document.getElementById("mylist");
    var  li=null;
    for(var i=0;i<10;i++)
{
    li=document.createElement("li");
    li.appendChild(document.createTextNode("Item"+(i+1)));
    fragment.appendChild(li);

}
ul.appendChild(fragment);      //一次性将文档片段中的内容添加到文档
    </script>
</body>
</html>