带有属性值的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]

演示：Fiddle

Answer 2

如果您使用的是“现代”浏览器（IE＆gt; = 8），您可以使用querySelector来允许您使用CSS stype选择器。

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

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

有关详细信息，请参阅您首选的DOM参考站点或进行搜索。