如果没有使用库，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>
两年迟来的答复和希望帮助未来的追随者。
