提问人：Anna FLYTE 提问时间：10/4/2023 最后编辑：Anna FLYTE 更新时间：10/4/2023 访问量：40
如何通过与数据属性数组进行比较来查找HTML中的多个元素？
How to find multiple elements in HTML by comparison to an array of data attributes?
问：
给定 HTML：
<div class="element" data-name="cat">
<div class="element" data-name="bird">
<div class="element" data-name="dog">
我只想找到与我保存在这样的数组中的数据属性匹配的元素
let Array1 = ["dog","cat","lizard"]
我以为我可以用querySelectorAll和数据属性过滤器来做到这一点，但它根本不起作用。返回一个空的节点列表。
let Elements = document.body.querySelectorAll('.element[data-name="${Array1}"]')
我正在研究一个正在查看网页的 firefox 扩展程序，所以我无法触摸 HTML，宁愿留在纯 javascript 中。我对编程很陌生，这是一个个人项目。
答：
1赞
nfv
10/4/2023
#1
不幸的是，没有捷径可走。我建议遍历您的可能值数组。由于 querySelectorAll 返回 ，您需要使用扩展语法 （） 将其扩展到捕获的元素数组中。NodeList...
const className = 'element',
attribute = 'data-name',
attribute_values = ['cat', 'bird', 'dog'],
elements = [];
for (let value of attribute_values) {
elements.push(...document.querySelectorAll('.' + className + '[' + attribute + '=' + value + ']'));
}
评论
1赞
Anna FLYTE
10/4/2023
我现在明白了，我让它起作用了。非常感谢
0赞
nfv
10/4/2023
感谢您的更新，@AnnaFLYTE。如果此答案对您有帮助，请将其标记为正确答案，以便认为此问题已解决。
1赞
JW Yap
10/4/2023
#2
解释
没有直接的方法可以做到这一点，因为 querySelector 被设计为仅基于单个 css/属性选择器选择元素。但是，我们可以通过多次重复查询来实现这一点。
法典
// Method 1: Loop through all the elements with attributes ['data-name']
// Then, apply filter to search for particular attribute value
const elementsWithAttrDataName = document.querySelectorAll('[data-name]');
const results = Array.from(elementsWithAttrDataName).filter(ele => {
return ele.getAttribute('data-name') === 'cat' || ele.getAttribute('data-name') === 'dog';
});
console.log(results.length);
// Method 2: Loop through all the keys you want to search for
var elements = [];
let keys = ["cat", "dog"];
keys.forEach(function(key){
elements.push(document.querySelectorAll('[data-name="'+key+'"]'));
});
console.log(elements.length);
评论