當前位置:首頁 > IT技術 > 編程語言 > 正文

JavaScript DOM優(yōu)化 - 文檔碎片(片段)的使用
2022-05-31 17:16:55

JavaScript中,文檔碎片獨立于DOM樹之外,存在于內存中,創(chuàng)建一個空白的文檔片段,可以使用createDocumentFragment來創(chuàng)建:

<script?type="text/javascript">
???var?fragment?=?document.createDocumentFragment();????//創(chuàng)建一個空的文檔片段(可用于做長褲倉庫)


</script>

對文檔片段的操作,可以插入、刪除節(jié)點 和 API都和其他DOM元素相同,但是也存在一些不同:

當你將文檔樹中的節(jié)點添加到文檔片段中后,就會從文檔樹中移除該節(jié)點,瀏覽器也不顯示這個節(jié)點了。文檔樹就沒這個節(jié)點了 相當于移動(剪切)

?

可以通過appendChild方法或者 insertBefore方法將文檔片段中的內容添加到文檔樹中,反之也可以。

文檔片段永遠不屬于文檔樹的一部分.
為什么說是DOM優(yōu)化呢? 因為這樣做在某種程度上啊(自己去研究) 可以提高效率

來串代碼把你整的明明白白!

<!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();????//創(chuàng)建一個空的文檔片段(可用于做長褲倉庫)
???var?p_node?=?document.getElementsByTagName('p')[0];??//獲取到p標簽節(jié)點
???fragment.appendChild(p_node);??//將p加入到append中?你會發(fā)現(xiàn)?標簽不顯示了
???/*------------吧節(jié)點放出來-----------*/
document.body.appendChild(fragment.children[0]);????????//把它搞回去去?你會發(fā)現(xiàn)又出現(xiàn)了?在a標簽后面

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

?

By:  Bi - Hu


作者:??咸瑜??


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

開通會員,享受整站包年服務立即開通 >