如果没有使用库,querySelectorAll不可用,则通过属性获取元素?

<p data-foo="bar"> 

你怎么能这样做呢?

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

querySelectorAll 不可用 ?

我需要一个至少在IE7中工作的本机解决方案。 我不在乎IE6。

您可以编写一个运行getElementsByTagName('*')的函数,并仅返回具有“data-foo”属性的元素:

 function getAllElementsWithAttribute(attribute) { var matchingElements = []; var allElements = document.getElementsByTagName('*'); for (var i = 0, n = allElements.length; i < n; i++) { if (allElements[i].getAttribute(attribute) !== null) { // Element exists with attribute. Add to array. matchingElements.push(allElements[i]); } } return matchingElements; } 

然后,

 getAllElementsWithAttribute('data-foo'); 

使用

 //find first element with "someAttr" attribute document.querySelector('[someAttr]') 

要么

 //find all elements with "someAttr" attribute document.querySelectorAll('[someAttr]') 

通过属性查找元素。 现在在所有相关的浏览器(甚至IE8)中都支持: http : //caniuse.com/#search=queryselector

我玩了一下,结束了这个粗略的解决方案:

 function getElementsByAttribute(attribute, context) { var nodeList = (context || document).getElementsByTagName('*'); var nodeArray = []; var iterator = 0; var node = null; while (node = nodeList[iterator++]) { if (node.hasAttribute(attribute)) nodeArray.push(node); } return nodeArray; } 

使用非常简单,即使在IE8中也能正常工作:

 getElementsByAttribute('data-foo'); // or with parentNode getElementsByAttribute('data-foo', document); 

http://fiddle.jshell.net/9xaxf6jr/

但我建议为此使用querySelector / All (并支持旧版浏览器使用polyfill ):

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

这也起作用:

 document.querySelector([attribute="value"]); 

所以:

 document.querySelector([data-foo="bar"]); 

试试这个 – 我稍微改变了上面的答案:

 var getAttributes = function(attribute) { var allElements = document.getElementsByTagName('*'), allElementsLen = allElements.length, curElement, i, results = []; for(i = 0; i < allElementsLen; i += 1) { curElement = allElements[i]; if(curElement.getAttribute(attribute)) { results.push(curElement); } } return results; }; 

然后,

 getAttributes('data-foo'); 

试试这个工作

document.querySelector( '[属性= “值”]')

例如:

document.querySelector( '[角色= “键”]')

不要在浏览器中使用

在浏览器中,使用document.querySelect('[attribute-name]')

但是,如果你是单元测试,你的模拟dom有一个flase querySelector实现,这将做的伎俩。

这是@ kevinfahy的答案,只是修剪了一下ES6胖箭头函数,并以可读性代价将HtmlCollection转换为数组。

所以只能使用ES6转换器。 另外,我不确定它是如何与许多元素性能。

 function getElementsWithAttribute(attribute) { return [].slice.call(document.getElementsByTagName('*')) .filter(elem => elem.getAttribute(attribute) !== null); } 

这里有一个变体,它将得到一个具有特定值的属性

 function getElementsWithAttributeValue(attribute, value) { return [].slice.call(document.getElementsByTagName('*')) .filter(elem => elem.getAttribute(attribute) === value); } 

对@kevinfahy的答案稍作修改,以便根据需要获取值的属性:

 function getElementsByAttributeValue(attribute, value){ var matchingElements = []; var allElements = document.getElementsByTagName('*'); for (var i = 0, n = allElements.length; i < n; i++) { if (allElements[i].getAttribute(attribute) !== null) { if (!value || allElements[i].getAttribute(attribute) == value) matchingElements.push(allElements[i]); } } return matchingElements; } 

这是获取属性值的最简单的方法

 <p id="something" data-foo="your value"> <script type="text/javascript"> alert(document.getElementById('something').getAttribute('data-foo')); </script> 

两年迟来的答复和希望帮助未来的追随者。