您能否告诉我是否有任何 DOM API 可以搜索具有给定属性名称和属性值的元素：
类似：
doc.findElementByAttribute("myAttribute", "aValue");
【问题讨论】：
标签： javascript dom
更新：在过去几年中，情况发生了巨大变化。您现在可以可靠地使用querySelector 和querySelectorAll，请参阅Wojtek's answer 了解如何执行此操作。
现在不需要 jQuery 依赖项。如果您使用的是 jQuery，那太好了……如果您不是，您不必再依赖它来按属性选择元素了。
在 vanilla javascript 中没有很短的方法可以做到这一点，但有一些可用的解决方案。
You do something like this, looping through elements and checking the attribute
如果像 jQuery 这样的库是一个选项，你可以做的更简单一些，像这样：
$("[myAttribute=value]")
如果值不是有效的CSS identifier（其中包含空格或标点符号等），则需要在值周围加上引号（可以是单引号或双引号）：
$("[myAttribute='my value']")
您也可以使用start-with、ends-with、contains 等...there are several options for the attribute selector。
【讨论】：
现代浏览器支持原生querySelectorAll，所以你可以这样做：
document.querySelectorAll('[data-foo="value"]');
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
浏览器兼容性详情：
您可以使用 jQuery 来支持过时的浏览器（IE9 及更早版本）：
$('[data-foo="value"]');
【讨论】：
'[data-foo="value"]'
$ 的 Chrome 或 Firefox 实现。在此处阅读更多信息：stackoverflow.com/questions/22244823/…
FindByAttributeValue("Attribute-Name", "Attribute-Value");
附言如果您知道确切的元素类型，则添加第三个参数（即div, a, p ...etc...）：
FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");
但首先，定义这个函数：
function FindByAttributeValue(attribute, value, element_type) {
element_type = element_type || "*";
var All = document.getElementsByTagName(element_type);
for (var i = 0; i < All.length; i++) {
if (All[i].getAttribute(attribute) == value) { return All[i]; }
}
}
附言根据 cmets 建议更新。
【讨论】：
document.querySelectorAll('[data-foo="value"]'); @Wojtek Kruszewski 在接受的遮阳篷上提出的建议。
这里是一个例子，如何通过 src 属性搜索文档中的图像：
document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");
【讨论】：
你可以使用 getAttribute：
var p = document.getElementById("p");
var alignP = p.getAttribute("align");
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
【讨论】：
p 元素而不使用 DOM 上的 id 或每个 p（和测试属性）
我们可以通过document.querySelector()和document.querySelectorAll()方法在DOM中使用属性选择器。
给你的：
document.querySelector("[myAttribute='aValue']");
并使用querySelectorAll():
document.querySelectorAll("[myAttribute='aValue']");
在querySelector() 和querySelectorAll() 方法中，我们可以像在“CSS”中选择一样选择对象。
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors 中有关“CSS”属性选择器的更多信息
【讨论】：
使用查询选择器，示例：
document.querySelectorAll(' input[name], [id|=view], [class~=button] ')
input[name] 输入具有name 属性的元素。
[id|=view] id 以view- 开头的元素。
[class~=button] 具有button 类的元素。
【讨论】：
您可以使用querySelector 进行选择：
document.querySelector("tagName[attributeName='attributeValue']")
【讨论】：
function optCount(tagId, tagName, attr, attrval) {
inputs = document.getElementById(tagId).getElementsByTagName(tagName);
if (inputs) {
var reqInputs = [];
inputsCount = inputs.length;
for (i = 0; i < inputsCount; i++) {
atts = inputs[i].attributes;
var attsCount = atts.length;
for (j = 0; j < attsCount; j++) {
if (atts[j].nodeName == attr && atts[j].nodeValue == attrval) {
reqInputs.push(atts[j].nodeName);
}
}
}
}
else {
alert("no such specified tags present");
}
return reqInputs.length;
}//optcount function closed这是一个用于选择具有特定属性值的特定标签的功能。要传递的参数是标签 ID，然后是标签名称 - 在该标签 ID 内，以及属性和第四个属性值。 此函数将返回找到的具有指定属性的元素数量及其值。 可以根据自己的情况修改。
【讨论】：