为什么一个元素即使在从DOM中删除后也可以访问

Why is an element accessible even after being removed from DOM?

本文关键字：DOM 删除 访问 也可以 一个 元素 为什么      更新时间：2023-09-26

window.a = {
  div1: $('#div1'),
  img1: $('#img1')
};
$(a.img1).click(function() {
  a.div1.html('<img id="img2" src="https://www.gstatic.com/webp/gallery/2.sm.jpg" />');
  $('#img2').click(function() {
    $(a.img1).attr('src', 'https://www.gstatic.com/webp/gallery/3.sm.jpg');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
  <img id="img1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>

当第9行执行时，即$(a.img1).attr('src', 'https://www.gstatic.com/webp/gallery/3.sm.jpg');第二次单击图像时，a.img1不应存在。那个么，为什么那个URL的HTTP请求会被发送到服务器(网络选项卡中的通知(？我使用的是Chrome版本45.0.2454.85 m。不要认为这是浏览器错误。同样适用于Firefox 39。

还做了一个小提琴手http://jsfiddle.net/ismusidhu/vvmwntcd/.

正如Marc B所说，您已经从DOM树中删除了该节点，但它仍然存在，因为window.img1仍然指向它(间接地，通过指向一个jQuery对象，该对象又指向它( mdash；所以它不能被垃圾收集。如果将window.img1设置为不同的值(如null或undefined(，则可以对元素进行垃圾回收。

这样想：你从图像的父元素(和各种兄弟元素，但现在忽略它(指向它开始：

+---------------------++-------------------+|(某些DOM元素(|-------->||+---------------------+|||图像元素|+------+|||img1|------------------------>||+------++-------------------+

然后，当您在其祖先上调用html时，DOM将删除对该元素的所有引用，您将得到以下内容：

+-------------------+|||||图像元素|+------+|||img1|------------------------>||+------++-------------------+

释放最后一个引用，元素就可以被回收/释放。

window.a = {
  div1: $('#div1'),
  img1: function() {
    return $("> img[id]", this.div1)
  }
};
function toggle(e) {
  a.div1.html(/1/.test(e.target.src) 
             ? '<img id="img2" src="https://www.gstatic.com/webp/gallery/2.sm.jpg" />' 
             : $('<img id="img1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />')
               .click(toggle)
  );
  
  $("#img2").on("click", function(e) {
    a.img1().attr({
        'src': 'https://www.gstatic.com/webp/gallery/3.sm.jpg',
        "id": "img3"
      })
      .click(toggle)
  });
}
a.img1().click(toggle);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
  <img id="img1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>

jsfiddlehttp://jsfiddle.net/vvmwntcd/6/

相关文章：