为什么document.querySelectorAll不会选择具有通过JS设置的属性的元素？

Question

如果我打印这样的标记：

<div popup="1">Some Text</div>

我可以执行document.querySelectorAll('[popup="1"]')并检索节点列表。 我甚至可以在JS中使用myDiv.popup返回弹出窗口的值。

但是，我想动态创建一些DOM元素。

所以我想创建一个div，设置弹出窗口，并通过(...).appendChild(newDiv)将其添加到DOM。

但是，如果我通过JS将“popup”设置为1，例如newDiv.popup = 1;，那么querySelectorAll将不会返回该对象。

有谁可以指出我可能缺少的东西？有没有办法做我想要的，而不必跟踪我创建的所有div只是为了添加弹出窗口？

Answer 1

您没有设置属性。您需要使用setAttribute。

＆＃13;

＆＃13;

var x = document.getElementById("foo");
x.setAttribute("popup","1");

var elems = document.querySelectorAll('[popup="1"]');
console.log(elems);

＆＃13;

<div id="foo">xxxx</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用它来添加属性：

yourElement.setAttribute("attribute", "value");

示例：

newDiv.setAttribute("popup", "1");