你能告诉我是否有任何 DOM API 可以搜索具有给定属性名称和属性值的元素：
就像是：
doc.findElementByAttribute("myAttribute", "aValue");
根据属性值在DOM中查找元素
IT技术
javascript
dom
2021-01-31 15:25:58
6个回答
现代浏览器支持本机，querySelectorAll因此您可以执行以下操作：
document.querySelectorAll('[data-foo="value"]');
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
有关浏览器兼容性的详细信息：
您可以使用 jQuery 来支持过时的浏览器（IE9 及更早版本）：
$('[data-foo="value"]');
更新：在过去的几年里，景观发生了巨大的变化。您现在可以可靠地使用querySelector和querySelectorAll，请参阅Wojtek 的答案以了解如何执行此操作。
现在不需要 jQuery 依赖项。如果您正在使用 jQuery，那太好了……如果不是，您就不必再依赖它来仅按属性选择元素了。
在 vanilla javascript 中没有很短的方法可以做到这一点，但有一些可用的解决方案。
如果像jQuery这样的库是一个选项，您可以更轻松地完成它，如下所示：
$("[myAttribute=value]")
如果该值不是有效的CSS 标识符（其中包含空格或标点符号等），则需要在该值周围加上引号（它们可以是单引号或双引号）：
$("[myAttribute='my value']")
您还可以执行start-with、ends-with、contains等...属性选择器有多个选项。
我们可以通过使用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”属性选择器
FindByAttributeValue("Attribute-Name", "Attribute-Value");
ps 如果您知道确切的元素类型，则添加第三个参数（即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]; }
}
}
ps 根据评论建议更新。
使用查询选择器，示例：
document.querySelectorAll(' input[name], [id|=view], [class~=button] ')
input[name]输入具有name属性的元素。
[id|=view]id 以 开头的元素view-。
[class~=button]元素与button类。