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

Question

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

类似：

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

Answer 1

现代浏览器支持本机

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"]');

Answer 2

更新：在过去的几年里，情况发生了巨大的变化。您现在可以可靠地使用

querySelector

和

querySelectorAll

，请参阅 Wojtek 的回答 了解如何执行此操作。

现在不需要 jQuery 依赖项。如果您正在使用 jQuery，那太好了...如果您没有使用，您就不再需要依赖它来按属性选择元素了。

---

在普通 JavaScript 中没有一种非常简短的方法可以做到这一点，但有一些可用的解决方案。

您可以执行类似的操作，循环遍历元素并检查属性

如果可以选择像 jQuery 这样的库，你可以做得更简单一点，如下所示：

$("[myAttribute=value]")

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

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

您还可以执行

start-with

、

ends-with

、

contains

等...属性选择器有多个选项。

Answer 3

我们可以通过使用

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

Answer 4

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

附注如果您知道确切的元素类型，则添加第三个参数（即

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

附注根据评论建议更新。

Answer 5

使用查询选择器。例子：

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

input[name]

输入具有

name

属性的元素。

[id|=view]

id 以

view-

开头的元素。

[class~=button]

具有

button

类的元素。

Answer 6

以下是如何使用

querySelector

选择：

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

Answer 7

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

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

Answer 8

你可以使用 getAttribute:

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

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

Answer 9

丹尼尔·德莱昂答案的修正
可以使用
进行搜索

^=

- 过滤 id（或任何其他属性）以

view

关键字

开头的元素

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

Answer 10

很简单，试试这个

<h1>The Document Object</h1>
<h2>The querySelector() Method</h2>

<h3>Add a background color to the first p element:</h3>
<p>This is a p element.</p>
<p data-vid="1">This is a p element.</p>
<p data-vid="2">This is a p element.</p>
<p data-vid="3">This is a p element.</p>

<script>
  document.querySelector("p[data-vid='1']").style.backgroundColor = "red";
  document.querySelector("p[data-vid='2']").style.backgroundColor = "pink";
  document.querySelector("p[data-vid='3']").style.backgroundColor = "blue";
</script>

Answer 11

function optCount(tagId, tagName, attr, attrval) {
    inputs = document.getElementById(tagId).getElementsByTagName(tagName);

    if (inputs) {
        var reqInputs = [];

        inputsCount = inputs.length;

        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("no such specified tags present");
    }
    return reqInputs.length;
}//optcount function closed

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