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
作者:??咸瑜??