document.querySelectorがJSを介して属性を設定した要素を選択するのはなぜですか？

Question

私はこのように私のマークアップを印刷する場合：

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

私はdocument.querySelectorAll('[popup="1"]')を行い、ノードのリストを取得することができます。 JSで返されたポップアップの値をmyDiv.popupで確認することもできます。

しかし、いくつかのDOM要素を動的に作成したいと考えています。

私はdivを作成し、ポップアップを設定し、(...).appendChild(newDiv)経由でDOMに追加したいと考えています。

しかし、newDiv.popup = 1;のようにJSを介して "popup"を1に設定した場合、querySelectorAllはオブジェクトを返しません。

誰かが紛失している可能性がありますか？ポップアップを追加するだけで作ったすべてのdivを追跡しなくても、私が望むことをする方法がありますか？

Answer 1

属性を設定していません。 setAttributeを使用する必要があります。

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

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

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

Answer 2

使用これは、属性を追加するには：

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

例：

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