仅使用纯JavaScript,选择所有具有特定data-属性(比如data-foo)的DOM元素的最有效方法是什么?
元素可能不同,例如:
<p data-foo="0"></p><br/><h6 data-foo="1"></h6>
仅使用纯JavaScript,选择所有具有特定data-属性(比如data-foo)的DOM元素的最有效方法是什么?
元素可能不同,例如:
<p data-foo="0"></p><br/><h6 data-foo="1"></h6>
当前回答
原生JavaScript的querySelector和querySelectorAll方法可以用来定位元素。如果数据集值是变量,请使用模板字符串。
var str = “term”; var term = document.querySelectorAll('[data-type=${str}]'); console.log(term[0].textContent); var details = document.querySelector('[data-type=“details”]'); console.log(details.textContent); <dl> <dt 数据类型=“term”>事物</dt> <dd 数据类型=“详细信息”>最通用的类型。</dd> </dl>
其他回答
你可以使用querySelectorAll:
document.querySelectorAll('[data-foo]');
var matches = new Array();
var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
var d = allDom[i];
if(d["data-foo"] !== undefined) {
matches.push(d);
}
}
不知道是谁给了我-1,但这就是证据。
http://jsfiddle.net/D798K/2/
document.querySelectorAll("[data-foo]")
会得到所有带有该属性的元素。
document.querySelectorAll("[data-foo='1']")
只会得到值为1的。
这里有一个有趣的解决方案:它使用浏览器的CSS引擎为匹配选择器的元素添加一个虚拟属性,然后计算计算的样式来找到匹配的元素:
它动态地创建了一个样式规则[…]然后扫描整个文档(使用 备受谴责和特定于ie但非常快速的document.all),并获得 每个元素的计算样式。然后我们寻找foo 属性,并检查它的计算结果是否为 “酒吧”。对于每个匹配的元素,我们将其添加到数组中。
原生JavaScript的querySelector和querySelectorAll方法可以用来定位元素。如果数据集值是变量,请使用模板字符串。
var str = “term”; var term = document.querySelectorAll('[data-type=${str}]'); console.log(term[0].textContent); var details = document.querySelector('[data-type=“details”]'); console.log(details.textContent); <dl> <dt 数据类型=“term”>事物</dt> <dd 数据类型=“详细信息”>最通用的类型。</dd> </dl>