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

现代浏览器支持原生 querySelectorAll，因此您可以：

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

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

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

http://quirksmode.org/dom/core/#t14

http://caniuse.com/queryselector

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

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

---

更新：在过去几年中，情况发生了巨大变化。您现在可以可靠地使用 querySelector 和 querySelectorAll，请参阅 Wojtek's answer 了解如何执行此操作。

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

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

You do something like this, looping through elements and checking the attribute

如果像 jQuery 这样的库是一个选项，您可以更轻松地执行此操作，如下所示：

$("[myAttribute=value]")

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

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

您还可以执行 start-with、ends-with、contains 等...there are several options for the attribute selector。

---

我们可以通过使用 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 类的元素。

---

你可以使用getAttribute：

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

---

这是一个示例，如何通过 src 属性搜索文档中的图像：

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

---

使用 querySelector 进行选择的方法如下：

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

---

Amendment for Daniel De León's Answer
可以使用
^= 进行搜索 - 过滤 id（或任何其他 attr）以 view 关键字开头的元素

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

---

函数 optCount(tagId, tagName, attr, attrval) { 输入 = document.getElementById(tagId).getElementsByTagName(tagName);如果（输入）{ var reqInputs = [];输入计数 = 输入长度； for (i = 0; i < inputsCount; i++) { atts = inputs[i].attributes; var attsCount = atts.length; for (j = 0; j < attsCount; j++) { if (atts[j].nodeName == attr && atts[j].nodeValue == attrval) { reqInputs.push(atts[j].nodeName); } } } } else { alert("没有这样的指定标签存在"); } 返回 reqInputs.length; }//optcount函数关闭

这是一个用于选择具有特定属性值的特定标签的功能。要传递的参数是标签 ID，然后是标签名称 - 在该标签 ID 内，以及属性和第四个属性值。此函数将返回找到的具有指定属性的元素数量及其值。你可以根据自己的情况进行修改。

---