DOM引用变量的工作原理

Question

所有

我是DOM新手，我有一个关于DOM引用的问题，例如（假设我使用D3.js或jQuery）：

var domelement = d3.select("div#chart");
d3.select("div#chart").remove();
console.log(domelement);

当我打印domelement时，它仍然在控制台中显示一个Object，即使它已从DOM结构中删除。

所以我想知道为什么这个变量仍然可以访问DOM对象？

如何确定参考文件是否无效？

由于

Answer 1

  

所以我想知道为什么这个变量仍然可以访问DOM对象？

您检索了对内存中对象的引用，只要您将其保留在范围内，您的变量就会保留它。

你可以改变一个引用它的对象，但你不能破坏它（不是在JS中）。

  

如何判断引用是否无效？

没有＆＃34;无效＆＃34;参考。如果要检查元素是否仍然在DOM中安装 - 您可以尝试搜索它。如果它在那里 - 你会发现它，否则你不会。

Answer 2

.remove()返回值（就像javascript中的return函数一样）。当您使用console.log时，会打印此值，但DOM中不再存在该值。 HTML元素可以作为javascript（document.createElement）中的数据节点存在。

在此状态下，它们作为数据存在，但尚未被添加到可见的任何位置。 .remove()会将元素从body中删除并以数据形式返回，然后console.log将其打印出来。