你能告诉我是否有任何DOM API可以搜索给定属性名和属性值的元素吗?
喜欢的东西:
doc.findElementByAttribute("myAttribute", "aValue");
当前回答
使用查询选择器，示例如下:
document.querySelectorAll(' input[name], [id|=view], [class~=button] ')
input[name]输入带有name属性的元素。
[id|=view] id为view-开头的元素。
[class~=button]包含按钮类的元素。
其他回答
现代浏览器支持本机querySelectorAll，所以你可以:
document.querySelectorAll('[data-foo="value"]');
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
浏览器兼容性的详细信息:
http://quirksmode.org/dom/core/#t14 http://caniuse.com/queryselector
你可以使用jQuery来支持过时的浏览器(IE9及更老版本):
$('[data-foo="value"]');
很简单，试试这个
<!DOCTYPE html>
<html>
<body>
<h1>The Document Object</h1>
<h2>The querySelector() Method</h2>
<h3>Add a background color to the first p element:</h3>
<p>This is a p element.</p>
<p data-vid="1">This is a p element.</p>
<p data-vid="2">This is a p element.</p>
<p data-vid="3">This is a p element.</p>
<script>
document.querySelector("p[data-vid='1']").style.backgroundColor = "red";
document.querySelector("p[data-vid='2']").style.backgroundColor = "pink";
document.querySelector("p[data-vid='3']").style.backgroundColor = "blue";
</script>
</body>
</html>
更新:在过去的几年里，情况发生了巨大的变化。你现在可以可靠地使用querySelector和querySelectorAll，参见Wojtek的答案如何做到这一点。
现在不需要jQuery依赖项了。如果你正在使用jQuery，很好……如果不是这样，就不需要再依赖它来按属性选择元素了。
在普通javascript中并没有一个非常简单的方法来做到这一点，但是有一些可用的解决方案。
您可以这样做，遍历元素并检查属性
如果你可以选择jQuery这样的库，你可以简单一点，像这样:
$("[myAttribute=value]")
如果值不是一个有效的CSS标识符(它有空格或标点符号等)，你需要在值周围加引号(它们可以是单引号或双引号):
$("[myAttribute='my value']")
你还可以使用start-with, end -with, contains等等。属性选择器有几个选项。
下面是如何使用querySelector进行选择:
document.querySelector("tagName[attributeName='attributeValue']")
使用查询选择器，示例如下:
document.querySelectorAll(' input[name], [id|=view], [class~=button] ')
input[name]输入带有name属性的元素。
[id|=view] id为view-开头的元素。
[class~=button]包含按钮类的元素。
