javascript - 具有属性值的 JavaScript 选择器

Question

这是我的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");

可能吗？

Answer 1

尝试使用.querySelectorAll()

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

演示：小提琴

Answer 2

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

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

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

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