选择所有带有“data-xxx”的元素;属性，不使用jQuery

小开

最佳答案

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的。

小开

试试→这里 .

    <!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 属性，并检查它的计算结果是否为 “酒吧”。对于每个匹配的元素，我们将其添加到数组中

小开

虽然不像querySelectorAll那样漂亮(它有一系列问题)，但这里有一个非常灵活的递归DOM函数，应该可以在大多数浏览器(旧的和新的)中工作。只要浏览器支持您的条件(即:数据属性)，您应该能够检索元素。

对于好奇的人来说:不要在jsPerf上测试这个与QSA的对比。像Opera 11这样的浏览器会缓存查询并扭曲结果。

代码:

function recurseDOM(start, whitelist)
{
/*
*    @start:        Node    -    Specifies point of entry for recursion
*    @whitelist:    Object  -    Specifies permitted nodeTypes to collect
*/


var i = 0,
startIsNode = !!start && !!start.nodeType,
startHasChildNodes = !!start.childNodes && !!start.childNodes.length,
nodes, node, nodeHasChildNodes;
if(startIsNode && startHasChildNodes)
{
nodes = start.childNodes;
for(i;i<nodes.length;i++)
{
node = nodes[i];
nodeHasChildNodes = !!node.childNodes && !!node.childNodes.length;
if(!whitelist || whitelist[node.nodeType])
{
//condition here
if(!!node.dataset && !!node.dataset.foo)
{
//handle results here
}
if(nodeHasChildNodes)
{
recurseDOM(node, whitelist);
}
}
node = null;
nodeHasChildNodes = null;
}
}
}

然后，您可以使用以下命令启动它:

recurseDOM(document.body, {"1": 1});表示速度，或者只是recurseDOM(document.body);

你的规格示例:http://jsbin.com/unajot/1/edit

不同规格的示例:http://jsbin.com/unajot/2/edit

小开

document.querySelectorAll('[data-foo]')

获取具有data-foo属性的所有元素的列表

如果你想要获取具有特定值的data属性的元素

<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}"]`)

注意，即使你没有在字符串中写value它也会被转换成字符串，就像我写的那样

<div data-foo=1></div>

然后在Chrome开发工具中检查元素，元素将如下所示

<div data-foo="1"></div>

你也可以在控制台写下面的代码来交叉验证

console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'))

为什么我写了'dataFoo'虽然属性是data-foo的原因数据集属性被转换为骆驼case属性

我已参考以下连结:

小开

原生JavaScript的querySelector和querySelectorAll方法可以用来定位元素。如果dataset值是变量，则使用模板字符串。

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 data-type="term">Thing</dt>
<dd data-type="details">The most generic type.</dd>
</dl>