1. 程式人生 > >《JavaScript高階程式設計》,removeChild()後,節點不存在於document中

《JavaScript高階程式設計》,removeChild()後,節點不存在於document中

最近看到《JavaScript高階程式設計》,第10章介紹replaceChild(),裡面有一句話

在使用 replaceChild()插入一個節點時,該節點的所有關係指標都會從被它替換的節點複製過來。儘管從技術上講,被替換的節點仍然還在文件中,但它在文件中已經沒有了自己的位置。

疑問是:被替換的節點指標都已經不指向文件中的任何節點了,為什麼還在文件中?

這裡寫圖片描述

我理解的文件是一個基於樹的資料結構,當其中一個節點A被替換掉時,該節點A也就不與該樹結構有任何關係,意思是無法通過該樹的資料結構的變數找到該節點A。而是通過賦值的新的變數來從window.oldNode來獲取。

來把程式碼試一下

<div class="div1">
    <ul>
      <li>1</li>
      <li class="li2">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <p>this is p element <span>&nbsp;this is span</span></p>
</div
>
<script> var oDiv = document.querySelector('.div1') var oUl = document.querySelector('ul') var oLi2 = document.querySelector('.li2') console.log(window.document) // ----- console.log(window.oDiv) console.log(window.document.contains(oDiv)) // ---- var removedNode = oUl.removeChild(oLi2) // ---
console.log(window.removedNode) // --- console.log(window.document.contains(removedNode))
</script>

這裡寫圖片描述

結果顯示,之前的div1還是在document物件中,而被刪除oLi2不在document物件中

如果強制性認為書裡描述是對的話,那就是我對這個文件 二字理解錯誤了。

被替換的節點仍然還在文件中,但它在文件中已經沒有了自己的位置

第一個文件指的是當前頁面的全域性變數window,第二個文件單單指window下的document的節點。