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

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

喜欢的东西:

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

当前回答

我们可以通过使用document.querySelector()和document.querySelectorAll()方法在DOM中使用属性选择器。

你的:

document.querySelector("[myAttribute='aValue']");

使用querySelectorAll():

document.querySelectorAll("[myAttribute='aValue']");

在querySelector()和querySelectorAll()方法中，我们可以像在“CSS”中一样选择对象。

关于“CSS”属性选择器的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

2018-01-21 09:01:20

其他回答

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

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

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

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

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

2020-06-11 21:05:05

FindByAttributeValue("Attribute-Name", "Attribute-Value");

附注:如果你知道确切的元素类型，你可以添加第三个参数(i.e.div, a, p…等等…):

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]; }
  }
}

附注:根据评论建议更新。

2014-01-24 10:15:02

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

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

2021-09-16 18:36:52

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

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

2016-12-18 08:59:57