javascript：选择所有具有“data-”属性的元素（不含jQuery）

问题描述：

不使用jQuery，选择具有特定data-属性（假设为data-foo）的所有dom元素的最有效方法是什么。元素可以是不同的标签元素。javascript：选择所有具有“data-”属性的元素（不含jQuery）

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>

请记住，“document.querySelectorAll”在IE7上不起作用。你将不得不创建一个后备脚本，它会*走DOM树并检查每个标签中的属性（实际上我不知道'querySelectorAll'有多快，并且会去手工检查标签）。 –

你不使用jQuery的原因是什么？在这样的情况下，这几乎是不可替代的...... –

@hay根本不用你甚至可以在纯css中选择这些元素。 – Knu

答

您可以使用querySelectorAll：

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

完美，谢谢！与半相关的注意事项：如果你想在名称中选择一个冒号的属性，你需要像冒号一样冒号（至少在Chrome中）：querySelectorAll（'[attribute \\：name]'）（参见http ：//code.google.com/p/chromium/issues/detail？id = 91637） – Jeremy

答

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/

你的大多数“正确”只是不正确。我很确定有人给你-1，因为你做了很多额外的工作来获取元素，然后将集合放入一个数组中。我没有给-1只是不喜欢，当没有解释一个人。 – Loktar

昂贵（页面上的所有元素），也使用数组文字符号（即[]），并且在它之上，它不起作用。自己去看看 - > http://jsbin.com/ipisul/edit#javascript,html – shawndumas

尽管OP使用HTML 5，但是使用全局（'*'）选择器的'getElementsByTagName'在早期的IE版本中被打破了。这是递归DOM搜索完成工作的地方。在'data-foo'属性映射的ElementNode上也没有“data-foo”属性。你正在寻找'dataset'对象（即：'node.dataset.foo'。 – 2011-08-16 20:57:24

答

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

将让你与属性的所有元素。

document.querySelectorAll("[data-foo='1']")

将只能得到你的人用1

答

Try it → here

<!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>

使用hasOwnProperty是2016年迄今为止我的最佳答案，关于其他迭代方法[Mdn hasOwnProperty]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty） – Cryptopat

答

Here是一个有趣的解决方案的值：它使用的浏览器CSS引擎添加一个虚拟属性的元素匹配选择器，然后评估计算出的风格以找到匹配的元素：

它会动态创建一个样式规则[...]然后扫描整个文档（使用很多被谴责和IE特定但非常快的document.all），并获取每个元素的计算样式。然后，我们查找结果对象上的foo 属性，并检查它是否评估为 “bar”。对于每个匹配的元素，我们添加到一个数组。

它被标记为html5所以它不会是 shawndumas

对，我删除了暗示旧的浏览器。 –

不错;）... – shawndumas

答

虽然不一样漂亮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

+10

'querySelectorAll'的问题是什么？ – ShreevatsaR

我也很想听听这些问题。 –

javascript：选择所有具有“data-”属性的元素（不含jQuery）

相关推荐