当您引用一个 DOM 对象 (var o=docume...) 并通过 parent.innerHTML='' 删除该 DOM 对象时会发生啥？

Posted 2023-05-07

【中文标题】当您引用一个 DOM 对象 (var o=docume...) 并通过 parent.innerHTML=\'\' 删除该 DOM 对象时会发生啥？

【英文标题】：What happens when you reference a DOM object (var o=docume...) and that DOM object is removed via parent.innerHTML=''?当您引用一个 DOM 对象 (var o=docume...) 并通过 parent.innerHTML='' 删除该 DOM 对象时会发生什么？

【发布时间】：2013-06-03 12:04:52

【问题描述】：

希望问题的标题清楚，但是：

发生以下情况时会发生什么：

 <div id="parent">
      <img src="..." id="myImage"/>
 </div>

 <script>
 var i=document.getElementById('myImage');
 document.getElementById('parent').innerhtml='';
 // variable i should not be 'undefined' right? chrome debugger says nope!
 </script>

我已经在 chromes 调试器中对此进行了测试，似乎即使在 DOM 对象不再存在之后，引用仍然“存在”...我正确吗？执行 console.log(i)（对于上面的示例），仍然返回对象及其所有属性......垃圾收集器是否应该启动并“未定义”这个引用，因为它不再存在于 DOM 中？

有谁知道除了 chrome 之外的其他浏览器（更具体地说，IE6...）如何处理类似的事情？

我问的原因是因为我们全局存储了一些引用（取决于用户操作），以供用户稍后执行另一个操作时使用......而且我们基本上需要一种方法来测试 DOM 对象是否仍然存在还是不..

我创建了一个小 jsfiddle 来让一切变得清晰：http://jsfiddle.net/9HCKt/

谢谢。

更新：我现在看到的问题不是很清楚...我如何测试以查看该对象是否仍以跨浏览器兼容的方式存在于 DOM 中？

【参考方案1】：

你的小提琴让事情变得更糟:) 为什么你需要知道被移除元素的类型？在它被移除之前它将是对象，之后也是。如果问题发生了什么：您的元素是Element。您可以使用i instanceof Element 进行检查。它只是与 DOM 断开连接。您实际上可以在 DOM 的其他或相同位置再次连接它，这将是合法的。如果问题如何检查元素是否连接到 DOM：只需检查它是否已定义父元素。

if (i.parentElement) 
   // i connected to DOM
 else 
   // i disconnected
;

想一想：当您使用document.createElement 添加新元素时，您的新元素尚未附加。但显然不是undefined。

【讨论】：

请注意，如果它是已与 DOM 断开连接的 'i' 的祖先，则此父元素测试将不起作用（请参阅 jsfiddle.net/9HCKt/1 ）。在这种情况下，您将不得不向上层级，直到到达文档元素。

【参考方案2】：

如果你可以使用 jQuery，

$(document).has($(i)).length

如果 i 仍在 DOM 中，则应为 1，否则应为 0。

执行console.log(i)（对于上面的例子），仍然返回 对象及其所有属性......垃圾收集器不应该踢 in and 'undefined' this reference 因为它不再存在于 DOM？

事实上，使用您的 i 变量，您正在维护对对象的引用，防止它被垃圾回收。

【讨论】：

+1 提到通过维护对对象的引用，可以防止垃圾收集......不知道这一点。