为什么元素从 DOM 中移除后仍可访问？

Question

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/。

Answer 1

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

这样想：你从指向它的图像的父元素（以及各种兄弟元素，但暂时忽略它）开始：

+------------------+ +------------------+ | （一些 DOM 元素）|---------->| | +---------------------+ | | |图像元素| +--------+ | | | img1 |------------>| | +------+ +------------------+

然后，当您在其祖先上调用 html 时，DOM 会删除对该元素的所有引用，并且您会得到：

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

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

Answer 2

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>

jsfiddle http://jsfiddle.net/vvmwntcd/6/