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

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

就像是：

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

更新：在过去几年中，情况发生了巨大变化。现在，您可以可靠地使用querySelector和querySelectorAll，有关如何执行操作，请参见Wojtek的答案。

现在不需要jQuery依赖项。如果您使用的是jQuery，那就太好了……如果您不使用jQuery，则不必再依赖于仅通过属性选择元素了。

在vanilla javascript中，执行此操作的方法不是很短，但是有一些可用的解决方案。

您可以执行以下操作，遍历元素并检查属性

如果可以选择像jQuery这样的库，则可以更轻松一些，例如：

$("[myAttribute=value]")

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

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

你也可以做start-with，ends-with，contains等... 还有的属性选择多个选项。

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

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Document.querySelectorAll

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

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

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

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

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

为您的：

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

并使用querySlectorAll()：

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

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

有关https://developer.mozilla.org/zh-CN/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根据评论建议进行了更新。

这是一个示例，如何通过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/zh-CN/docs/Web/API/Element/getAttribute

使用查询选择器，例如：

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

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

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

[class~=button]与button类的元素。