根据属性值在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,那么很好......如果您不是,那么您不必再依赖于按属性选择元素了.

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

你做这样的事情,循环元素和检查属性

如果像jQuery这样的库是一个选项,你可以更轻松地做到这一点,如下所示:

$("[myAttribute=value]")

如果该值不是有效的CSS标识符(其中包含空格或标点符号等),则需要围绕该值的引号(它们可以是单引号或双引号):

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

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

Answer 3

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

为你的:

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

并使用querySlectorAll():

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

在querySelector()和querySelectorAll()方法中,我们可以在"CSS"中选择对象.

有关"CSS"属性选择器的更多信息,请访问https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

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

ps如果您知道确切的元素类型,则添加第3个参数(即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.

Answer 5

您可以使用以下方法进行选择querySelector：

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

Answer 6

你可以使用 getAttribute：

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

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

Answer 7

Daniel De Le\xc3\xb3n\'s 答案的修正
\n可以使用
\n ^=- 过滤器搜索 id（或任何其他 attr）以view关键字开头的元素

\n

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

\n

Answer 8

很简单，试试这个

<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 9

使用查询选择器，示例：

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

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

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

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

Answer 10

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

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