在Javascript中,为什么在一个元素上设置outerHTML会将其parentNode设置为'null'？

Question

在Javascript中,当我将DOM中元素的outerHTML设置为新值(例如,将其更改为其他元素)时,其"parentNode"属性设置为"null".为什么？我希望它能保持在outerHTML变化之前的任何价值.

我猜DOM是通过解析'outerHTML'字符串并使用它来替换原始对象来创建一个新对象.如果是这种情况,是否有一种方法来检索新创建的对象？

重现的步骤(在Linux Chrome和Linux Firefox上测试)

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

2. 打开开发控制台(可能是F12)

3. 看看页面DOM(Chrome中的元素选项卡,Firefox中的Inspector)

4. 删除"身体"的任何孩子,只是为了让事情更清洁

5. 打开控制台并键入:

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - 应该将"body"HTML写入控制台.

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

   obj1.parentNode - 现在将'null'写入控制台.

Answer 1

这是按照文档

此外,虽然元素将在文档中替换,但设置了outerHTML属性的变量仍将保留对原始元素的引用:

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