javascript:select所有具有“data-”属性的元素(不含jQuery)

不使用jQuery,select所有具有特定data-属性的dom元素(比方说data-foo )是最有效的方法。 元素可以是不同的标签元素。

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

你可以使用querySelectorAll :

 document.querySelectorAll('[data-foo]'); 
 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> 

虽然不如querySelectorAll (其中有许多问题),但这是一个非常灵活的函数,它可以recursionDOM,并且可以在大多数浏览器(旧的和新的)中工作。 只要浏览器支持你的条件(即:数据属性),你应该能够检索元素。

好奇:不要打扰在jsPerf上testing这个与QSA。 像Opera 11这样的浏览器将会caching查询并歪曲结果。

码:

 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

 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,但这里是certificate。

http://jsfiddle.net/D798K/2/

下面是一个有趣的解决scheme:它使用浏览器CSS引擎来添加一个虚拟属性到匹配select器的元素,然后评估计算的样式以find匹配的元素:

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