JavaScript DOM优化 - 文档碎片（片段）的使用

JavaScript中，文档碎片独立于DOM树之外，存在于内存中，创建一个空白的文档片段，可以使用createDocumentFragment来创建：

<script type="text/javascript">
   var fragment = document.createDocumentFragment();    //创建一个空的文档片段(可用于做长裤仓库)


</script>

对文档片段的操作，可以插入、删除节点 和 API都和其他DOM元素相同，但是也存在一些不同：

当你将文档树中的节点添加到文档片段中后，就会从文档树中移除该节点，浏览器也不显示这个节点了。文档树就没这个节点了 相当于移动(剪切)

 

可以通过appendChild方法或者 insertBefore方法将文档片段中的内容添加到文档树中，反之也可以。

文档片段永远不属于文档树的一部分.
为什么说是DOM优化呢  因为这样做在某种程度上啊(自己去研究) 可以提高效率

来串代码把你整的明明白白！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>永远的学生</p>
    <a href="">永远的学生</a>
</div>

<script type="text/javascript">
   var fragment = document.createDocumentFragment();    //创建一个空的文档片段(可用于做长裤仓库)
   var p_node = document.getElementsByTagName('p')[0];  //获取到p标签节点
   fragment.appendChild(p_node);  //将p加入到append中 你会发现 标签不显示了
   /*------------吧节点放出来-----------*/
document.body.appendChild(fragment.children[0]);        //把它搞回去去 你会发现又出现了 在a标签后面

</script>
</body>
</html>

 

By: 　Bi - Hu

posted @ 2021-05-17 09:03  咸瑜  阅读(263)  评论(0)  编辑  收藏  举报