<p data-foo="bar">
你怎么能做相当于
document.querySelectorAll('[data-foo]')
我需要一个至少适用于 IE7 的本机解决方案。我不在乎 IE6。
当 querySelectorAll 在不使用库的情况下不可用时，按属性获取元素？
IT技术
javascript
dom
2021-01-23 14:24:01
6个回答
您可以编写一个运行 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('[role="button"]')
这也有效：
document.querySelector([attribute="value"]);
所以：
document.querySelector([data-foo="bar"]);