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

喜欢的东西:

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

当前回答

下面是一个例子,如何通过src属性在文档中搜索图像:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

其他回答

使用查询选择器,示例如下:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]输入带有name属性的元素。

[id|=view] id为view-开头的元素。

[class~=button]包含按钮类的元素。

下面是如何使用querySelector进行选择:

document.querySelector("tagName[attributeName='attributeValue']")

更新:在过去的几年里,情况发生了巨大的变化。你现在可以可靠地使用querySelector和querySelectorAll,参见Wojtek的答案如何做到这一点。

现在不需要jQuery依赖项了。如果你正在使用jQuery,很好……如果不是这样,就不需要再依赖它来按属性选择元素了。


在普通javascript中并没有一个非常简单的方法来做到这一点,但是有一些可用的解决方案。

您可以这样做,遍历元素并检查属性

如果你可以选择jQuery这样的库,你可以简单一点,像这样:

$("[myAttribute=value]")

如果值不是一个有效的CSS标识符(它有空格或标点符号等),你需要在值周围加引号(它们可以是单引号或双引号):

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

你还可以使用start-with, end -with, contains等等。属性选择器有几个选项。

Daniel De León的回答 它可以用来搜索 ^= - filters id(或任何其他attr)以view关键字开头的元素

document.querySelectorAll("[id^='view']")

下面是一个例子,如何通过src属性在文档中搜索图像:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");