JavaScript DOM优化 - 文档碎片(片段)的使用
2022-05-31 17:16:55

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


作者:​​咸瑜​


本文摘自 :https://blog.51cto.com/u


更多科技新闻 ......