在Javascript中，为什么在一个元素上设置outerHTML将其parentNode设置为＆＃39; null＆＃39;？

Question

在Javascript中，当我将DOM中元素的outerHTML设置为新值（例如，将其更改为其他元素）时，其父节点＆＃39; property设置为＆＃39; null＆＃39;。为什么？我希望它能保持在outerHTML改变之前的任何价值。

我猜DOM正在通过解析＆＃39; outerHTML＆＃39;来创建一个新对象。字符串并使用它来替换原始对象。如果是这种情况，是否有方法来检索新创建的对象？

重现步骤（在Linux Chrome和Linux Firefox上测试）

1. 在浏览器中打开一个干净的窗口，

2. 打开开发控制台（可能是F12）

3. 查看页面DOM（Chrome中的元素标签，Firefox中的Inspector）

4. 删除＆＃39; body＆＃39;中的所有孩子，只是为了让事情更清洁

5. 打开控制台并输入：

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - 应该写一下＆＃39; body＆＃39; HTML到控制台。

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

   obj1.parentNode - 现在写道＆＃39; null＆＃39;到控制台。

Answer 1

这是按doc

  

此外，虽然元素将在文档中被替换，但变量   其outerHTML属性设置仍将保持对   原始元素：

这意味着代码中的obj1仍然指的是现在已经从DOM树中分离出来的原始元素。