为什么即使从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行执行ie $(a.img1).attr('src', 'https://www.gstatic.com/webp/gallery/3.sm.jpg'); 在第二次单击图像时，a.img1不应存在。 那么，为什么该URL的HTTP请求被发送到服务器（网络选项卡中的注意事项）？ 我使用的是Chrome版本45.0.2454.85米。 不要认为这是一个浏览器错误。 在Firefox 39上也一样。

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

Answer 1

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

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

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

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

+-------------------+
                                 |                   |
                                 |                   |
                                 | the image element |
+------+                         |                   |
| 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/