Question

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

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

使用以下命令创建JS对象：

var obj = {el : document.querySelector("#list") }

按预期打印obj.el时，控制台会返回以下内容：

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

现在我可以使用obj.el.innerHTML = "foo";设置内容使用以下内容删除元素后

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

元素在先前创建的对象obj中保持。打印obj.el仍会返回：<div id="list">hello</div>

首先，为什么会这样？有没有办法将一个首选项存储到一个元素而不存储一个复杂的嵌套CSS选择器，这会降低速度？

Answer 1

阅读这个我认为可以帮助你的小例子。

// it would be in you code : $("<div>",{id : "list"}).html("hello").appendTo("body");
var obj = {
  a : 5
};

// let me create this object to better undersatnding
var obj2 = {
  a : 3
};

document.write(obj.a + "<br>"); // 5
document.write(obj2.a + "<br>"); // 3


// it would be in you code :var obj = {el : document.querySelector("#list") }
obj2.a = obj.a; //


document.write(obj2.a + "<br>"); // 5

//it would be in you code : $("#list").remove();
delete obj.a;

// here we still have something for obj2
document.write(obj2.a + "<br>"); // 5

// try again :
obj2.a = obj.a;
document.write(obj2.a + "<br>"); // undefined

如果您尝试：

$("#list").remove();
var obj = {el : document.querySelector("#list") }

我认为obj将是未定义的！

Answer 2

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

obj将成为

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

Here是可以帮助您的演示。

引用JS对象中的HTML元素

2 个答案: