如何通过数据属性数组匹配查找HTML中的多个元素？

你的问题出在直接把数组塞进CSS选择器里了——模板字符串里的${Array1}会被转成字符串"dog,cat,lizard"，而页面里根本没有data-name等于这个字符串的元素，所以返回空列表很正常。下面给两种纯JS的解决办法：

方法一：动态生成正确的CSS选择器 #

先把数组里的每个元素转换成对应的CSS选择器片段，再拼接成完整的选择器交给querySelectorAll：

let Array1 = ["dog","cat","lizard"];
// 把数组元素转成单个选择器，再用逗号拼接
const selectorStr = Array1.map(item => `.element[data-name="${item}"]`).join(', ');
let Elements = document.body.querySelectorAll(selectorStr);

这样生成的选择器是.element[data-name="dog"], .element[data-name="cat"], .element[data-name="lizard"]，能精准匹配到data-name为dog和cat的元素（lizard没有对应元素，不会被选中）。

方法二：先选所有元素再筛选 #

先获取所有.element元素，再用filter方法筛选出data-name在数组里的元素：

let Array1 = ["dog","cat","lizard"];
// 把NodeList转成数组后筛选
let Elements = Array.from(document.body.querySelectorAll('.element')).filter(el => {
  return Array1.includes(el.dataset.name);
});

这里el.dataset.name可以直接拿到元素的data-name属性值，includes方法判断这个值是否在目标数组里，逻辑更直观，适合新手理解。

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