Javascript 在JS对象中引用HTML元素

当我使用JQuerys动态创建元素时：

$("<div>",{id : "list"}).html("hello").appendTo("body");

当按预期打印

obj.el

时，控制台返回以下内容：

<div id="list">hello</div>

元素保留在先前创建的对象obj中。打印

obj.el

仍然返回：

hello

首先，为什么会这样？

---

有没有一种方法可以在不存储复杂的嵌套CSS选择器的情况下存储对某个元素的首选项，这样会降低速度？

阅读这个我认为可以帮助您的小示例

//它将出现在您的代码中：$（“”，{id:“list”}）.html（“hello”）.appendTo（“body”）；
var obj={
a:5
};
//让我创建此对象以更好地理解
变量obj2={
a:3
};
document.write（对象a+“
”）；//5.
document.write（obj2.a+“
”）；//3.
//它将出现在您的代码中：var obj={el:document.querySelector（“#list”）}
obj2.a=obj.a//
document.write（obj2.a+“
”）；//5.
//它将出现在您的代码中：$（“#list”）.remove（）；
删除obj.a；
//在这里，我们仍然有一些东西
document.write（obj2.a+“
”）；//5.
//请重试：
obj2.a=obj.a；
document.write（obj2.a+“
”）；//未定义的

可以对el属性使用getter和setter。不要将元素存储在el中，而是在访问el时填充它的值

obj将成为

var obj = {
  get el(){
    return document.querySelector("#list");
  }
}

---

这是一个演示，可能会对您有所帮助。

您正在从DOM中删除，而不是从对象中删除。您仍然需要使用

delete obj

从

窗口

对象中取消设置（删除）对象控制台可能会使用缓存来显示删除的元素。若要确保已删除该元素，请尝试再次访问该元素。这将导致一个明确的错误。@jeff重复使用该元素不会导致错误。Chromes控制台允许我毫无问题地更改元素内容。然后可以使用控制台将元素与新内容一起输出。。。在从DOM中删除元素后，我希望得到类似typeof（obj.el）=“undefined”的东西。谢谢你的示例！我不明白的是，如果DOM中已经存在一个完整的HTML元素，为什么JS会将它存储在一个对象中。为什么不创建一个引用呢？有没有办法做到这一点？这正是它所做的！它是对对象的引用，而不是对Dom对象的引用@tlaloc是一个关于所有这些事情的非常好的页面：，特别是在您的例子“垃圾收集”中，那么当我尝试通过它的（不再有效）引用访问一个已删除的DOM元素时，为什么没有收到错误？我不应该犯点错误吗？感谢@Anonymous0day的链接@tlaloc垃圾收集器在有引用之前不要删除它！如果你有两个obj。引用同一个对象时，当第一次删除发生时，它作用于引用而不是对象，垃圾收集器记住第一个obj没有对对象的引用，而是第二个obj引用它。当我们删除第二个obj时，垃圾收集器还没有对该对象进行任何引用，它会销毁该对象

$("#list").remove();

var obj = {
  get el(){
    return document.querySelector("#list");
  }
}