當(dāng)前位置:首頁 > IT技術(shù) > 編程語言 > 正文

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

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

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


</script>

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

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

?

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

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

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

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
</head>
<body>
<div>
????<p>永遠(yuǎn)的學(xué)生</p>
????<a?href="">永遠(yuǎn)的學(xué)生</a>
</div>

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

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

?

By:  Bi - Hu


作者:??咸瑜??


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

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