javascript - 为什么一个元素在从 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。

还做了一个fiddler http://jsfiddle.net/ismusidhu/vvmwntcd/ .

Answer 1

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

这样想:您从指向它的图像的父元素(以及各种兄弟元素，但现在忽略它)开始:

+---------------------+          +-------------------+
| (some DOM elements) |--------->|                   |
+---------------------+          |                   |
                                 | the image element |
+------+                         |                   |
| img1 |------------------------>|                   |
+------+                         +-------------------+

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

                                 +-------------------+
                                 |                   |
                                 |                   |
                                 | the image element |
+------+                         |                   |
| img1 |------------------------>|                   |
+------+                         +-------------------+

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