如何使用querySelector查找带自定义属性的动态创建DOM元素？

你完全可以使用querySelector查找带有自定义属性的动态创建DOM元素，当前代码无法匹配动态元素是属性设置方式错误导致的。

问题原因 #

DOM存在两种可读写的属性维度：

• DOM对象属性（property）：你写的div.val = i是给JS内存中的DOM元素对象新增了自定义property，仅存在于内存中，不会同步到HTML标签上，而querySelector的属性选择器[val]匹配的是HTML标签上的attribute，因此无法命中动态生成的元素。
• HTML标签特性（attribute）：你静态写在HTML里的<div val="a"></div>属于直接定义在标签上的attribute，所以可以被属性选择器正常识别。

修复方案 #

方案1：将自定义属性写到HTML attribute中（推荐） #

把动态创建元素时的属性赋值逻辑改为用setAttribute方法，即可被querySelector正常匹配：

let i = 4, wrapper = document.getElementsByClassName("wrapper")[0];
while (i-- > 0) {
    let div = document.createElement("div");
    // 改为setAttribute把val写到标签特性中
    div.setAttribute('val', i);
    wrapper.appendChild(div);
}

let myDiv = document.querySelector(".wrapper div[val]");
console.log("myDiv", myDiv); // 可以正常输出第一个匹配的动态元素

建议遵循HTML5自定义属性规范，给自定义属性加data-前缀，比如写成data-val，避免和原生DOM属性冲突，读写时可以直接用div.dataset.val调用。

方案2：如果不需要把属性暴露到HTML标签上，仅存在于DOM对象中，可以遍历匹配 #

如果你的业务逻辑不希望属性出现在HTML结构中，可以先获取所有候选元素，遍历判断DOM对象是否存在对应的property：

const allDivs = document.querySelectorAll('.wrapper div');
let myDiv = null;
for (const div of allDivs) {
  // 判断DOM对象是否存在val属性
  if ('val' in div) {
    myDiv = div;
    break;
  }
}
console.log("myDiv", myDiv);

内容的提问来源于stack exchange，提问作者Jesper