具有属性值的 JavaScript 选择器答案

【问题标题】：JavaScript selector with attribute value具有属性值的 JavaScript 选择器
【发布时间】：2013-07-20 05:06:54
【问题描述】：

这是我的html代码

<p foo="bar">Lorem Ipsum color dot....</p>

现在，我想用另一个 javascript 代码选择这个标签。我可以通过使用以下代码选择 p 标签来做到这一点：-

document.getElementsByTagName("p")[0];

但是，如果 p 不是数字 0，我该怎么办？这个p标签之前什么时候还有p标签？

我想选择这个带有 foo 名称的标签，就像 id 一样。我可以使用 Id 选择 attr。

document.getElementById("any");

但我需要这样的东西：

document.getElementByFoo("bar");

有可能吗？

【问题讨论】：

您可以将 CSS 选择器与 querySelectorAll 一起使用。在这里查看developer.mozilla.org/en-US/docs/Web/API/…。
document.getElementsByClassName(names); ?
您的用例是什么？（foo 到底是什么？）

【解决方案1】：

如果您使用的是“现代”浏览器（IE >= 8），您可以使用querySelector，它允许您使用 CSS 类型选择器。

在您的情况下，您将使用document.querySelector ('p[foo="bar"]')，这将返回具有foo="bar" 属性的第一个p 元素。还有querySelectorAll，它返回符合选择标准的所有元素的集合。

querySelector 和querySelectorAll 都可以应用于除document 之外的任何元素。

有关更多信息，请访问您首选的 DOM 参考站点或进行搜索。

【讨论】：

【解决方案2】：

尝试使用.querySelectorAll()

var div = document.querySelectorAll('p[foo="bar"]')[0]

演示：Fiddle

【讨论】：