Javascript 基于属性值在DOM中查找元素

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

比如：

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

---

更新：在过去几年中，景观发生了巨大变化。您现在可以可靠地使用

querySelector

和

queryselectoral

，有关如何执行此操作，请参阅

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

---

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

如果像这样的库是一个选项，您可以做得更简单一些，如下所示：

$("[myAttribute=value]")

如果该值无效（其中包含空格或标点符号等），则需要在该值周围加引号（可以是单引号或双引号）：

---

您还可以执行以下操作：

以

开始，

以

结束，

包含

，等等……

现代浏览器支持本机

查询选择所有

，因此您可以执行以下操作：

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

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

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

p、 s.如果您知道确切的元素类型，则添加第三个参数（即

div、a、p…等）

：

但首先，定义此函数：

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

函数FindByAttributeValue（属性、值、元素类型）{
元素_类型=元素_类型||“*”；
var All=document.getElementsByTagName（元素类型）；
对于（变量i=0；i

---

p、 以下是一个示例，如何按src属性搜索文档中的图像：

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

---

您可以使用getAttribute：

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

---

我们可以通过使用

document.querySelector（）

和

document.querySelector（）方法在DOM中使用属性选择器

给你：

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

并使用
querySelectorAll（）
：

在
querySelector（）
和
queryselectoral（）
方法中，我们可以像在“CSS”中选择一样选择对象

有关“CSS”属性选择器的详细信息，请参见使用查询选择器，示例：

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

input[name]
使用
name
属性输入元素

[id |=view]
元素的id以
视图-
开头

[class~=button]
元素，使用
按钮
类。
如果您正在寻找Jquery Sol，请将接受的答案更新为现代解决方案，Wojtek的答案？实际上，香草JavaScript DOM API在现代解决方案上运行得非常好browsers@WojtekKruszewski不是在2010年：）我确实更新了，希望询问者能为我们移动accept-我们希望当前的信息在那里。我认为jQuery（或同等）可能是最容易的，尤其是跨浏览器兼容，而不需要知道这需要什么。我一直得到一个空数组！我试图通过SVG的d属性获取它，并尝试$（“[d=path]”）；其中“path”是一个包含我需要的特定d属性的变量。是否有人尝试过使用svg路径执行此操作？为了具体化“现代”定义：选择器应该是：
“[data foo=“value”]”
关于性能的任何说明？这比遍历所有节点更快吗？请注意，“jQuery”示例可能不是jQuery。它可以是Chrome或Firefox的
$
实现。在这里阅读更多信息：什么是“数据foo”……在这个例子中，“myAttribute”去了哪里？为什么？！这样做是在循环所有DOM—如果页面上只有5个元素，那么这看起来很棒。
document.queryselectoral（'[data foo=“value”]'）
由@Wojtek Kruszewski在接受的awnser上提出。他希望选择
p
元素，而不使用
id
或DOM（和测试属性）上的每个
p
，我必须删除像本文这样的内部引号。querySelectorAll（“selector[myAttribute=aValue]”；
document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

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

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

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

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