仅使用纯 JavaScript，选择具有特定data-属性（假设data-foo）的所有 DOM 元素的最有效方法是什么。
元素可能不同，例如：
<p data-foo="0"></p><br/><h6 data-foo="1"></h6>
不使用 jQuery 选择所有具有“data-xxx”属性的元素
IT技术
javascript
html
dom
2021-01-17 12:02:56
6个回答
您可以使用querySelectorAll：
document.querySelectorAll('[data-foo]');
document.querySelectorAll("[data-foo]")
将为您提供具有该属性的所有元素。
document.querySelectorAll("[data-foo='1']")
只会得到值为 1 的值。
document.querySelectorAll('data-foo')
获取具有属性 data-foo 的所有元素的列表
如果您想获取具有特定值的数据属性的元素，例如
<div data-foo="1"></div>
<div data-foo="2" ></div>
我想将 div 的 data-foo 设置为“2”
document.querySelector('[data-foo="2"]')
但是，如果我想将数据属性值与某个变量的值相匹配，就像我想获取元素一样，如果 data-foo 属性设置为 i
var i=2;
因此您可以使用模板文字动态选择具有特定数据元素的元素
document.querySelector(`[data-foo="${i}"]`)
请注意，即使您不在字符串中写入值，它也会像我写的那样转换为字符串
<div data-foo=1></div>
然后在 Chrome 开发者工具中检查元素，元素将如下所示
<div data-foo="1"></div>
您也可以通过在控制台中编写以下代码来交叉验证
console.log(typeof document.querySelector(`[data-foo]="${i}"`).dataset('dataFoo'))
为什么我写了 'dataFoo' 虽然属性是 data-foo 原因数据集属性被转换为camelCase 属性
我参考了以下链接
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
这是我在 stackoverflow 上的第一个答案，请让我知道如何改进我的答案写作方式。
<!DOCTYPE html>
<html>
<head></head>
<body>
<p data-foo="0"></p>
<h6 data-foo="1"></h6>
<script>
var a = document.querySelectorAll('[data-foo]');
for (var i in a) if (a.hasOwnProperty(i)) {
alert(a[i].getAttribute('data-foo'));
}
</script>
</body>
</html>
这是一个有趣的解决方案：它使用浏览器的 CSS 引擎向与选择器匹配的元素添加一个虚拟属性，然后评估计算出的样式以找到匹配的元素：
它确实动态地创建了一个样式规则 [...] 然后它扫描整个文档（使用非常受谴责和 IE 特定但非常快的 document.all）并获取每个元素的计算样式。然后我们在结果对象上查找 foo 属性并检查它是否评估为“bar”。对于匹配的每个元素，我们添加到一个数组中。