根据属性值在 DOM 中查找元素

javascript dom

2022-08-29 23:23:11

你能告诉我是否有任何DOM API搜索具有给定属性名称和属性值的元素吗：

像这样：

doc.findElementByAttribute("myAttribute", "aValue");

答案 1

现代浏览器支持本机，因此您可以执行以下操作：querySelectorAll

document.querySelectorAll('[data-foo="value"]');

有关浏览器兼容性的详细信息：

您可以使用jQuery来支持过时的浏览器（IE9及更早版本）：

$('[data-foo="value"]');

答案 2

更新：在过去的几年里，景观发生了巨大变化。您现在可以可靠地使用和，请参阅 Wojtek 的答案，了解如何执行此操作。querySelectorquerySelectorAll

现在不需要 jQuery 依赖项。如果您使用的是jQuery，那就太好了...如果你不是，你不必再依赖它来按属性选择元素。

在vanilla javascript中没有很短的方法可以做到这一点，但是有一些可用的解决方案。

如果像jQuery这样的库是一个选项，你可以做得更容易一些，就像这样：

$("[myAttribute=value]")

如果值不是有效的 CSS 标识符（其中有空格或标点符号等），则需要在值两边加上引号（它们可以是单引号，也可以是双引号）：

$("[myAttribute='my value']")

您也可以做，，，等...属性选择器有几个选项。start-withends-withcontains