DrA*_*oel 180 javascript html5 dom
仅使用JavaScript,选择具有特定data-属性的所有DOM元素的最有效方法是什么(比方说data-foo).元素可以是不同的标记元素.
<p data-foo="0"></p><br/><h6 data-foo="1"></h6>
Joe*_*Joe 332
您可以使用querySelectorAll:
document.querySelectorAll('[data-foo]');
Jos*_*kle 203
document.querySelectorAll("[data-foo]")
将为您提供具有该属性的所有元素.
document.querySelectorAll("[data-foo='1']")
只会得到值为1的那些.
小智 15
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 原因数据集属性被转换为驼峰属性
我参考了以下链接
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 上的第一个答案，请让我知道如何改进我的答案写作方式。
sha*_*mas 13
<!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>
| 归档时间： |
|
| 查看次数： |
195292 次 |
| 最近记录： |