在Javascript中，爲什麼在元素上設置outerHTML會將其parentNode設置爲'null'？

Question

在Javascript中，當我將DOM中元素的outerHTML設置爲新值（例如將其更改爲不同元素）時，其'parentNode'屬性設置爲'null'。爲什麼？我希望它保持在外部HTML變化之前的任何價值。

我想DOM是通過解析'outerHTML'字符串並用它來替換原始對象來創建一個新對象。如果是這種情況，是否有方法來檢索新創建的對象？

步驟來重現

1. 打開您的瀏覽器一個乾淨的窗口（在Linux上的Chrome & Linux的Firefox的測試），

2. 打開開發者控制檯（F12，可能）

3. 看看頁面DOM（Chrome中的元素標籤，Firefox中的Inspector）

4. 刪除任何'體」，只是爲了讓事情變得更清潔

5. 打開控制檯，輸入：

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - 應該寫的 '身體' HTML到控制檯。

   obj1.outerHTML = "<div id='2'></div>"

   obj1.parentNode - 現在寫 '空' 到控制檯。

Answer 1

這是因爲每doc

另外，雖然元素將在文檔中被替換，可變 其的outerHTML屬性設定仍將保持到 原始元素的引用：

這意味着obj1在你的代碼中仍然指的是現在已經從DOM樹中分離出來的原始元素。