JavaScript 通过 href 获取元素？

Question

我有下面的脚本

var els = document.getElementsByTagName("a");
for(var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

然而，由于有很多链接，因此搜索整个页面大约需要 20 秒。

但是，我只需要定位具有特定 href 的 a，例如。 http://domain.example/

所以理想情况下，我希望能够以与 jQuery 类似的方式执行此操作，但不使用框架。所以像

var els = document.getElementsByTagName("a[href='http://domain.example']");

我该怎么做才能让它只搜索具有匹配 href 的对象？

Answer 1

2016 年更新

这个问题发布到现在已经 4 年多了，事情取得了很大进展。

您不能使用:

var els = document.getElementsByTagName("a[href='http://domain.example']");

但是您可以使用的是:

var els = document.querySelectorAll("a[href='http://domain.example']");

(注意:浏览器支持见下文)

这将使您问题中的代码完全按照您的预期工作:

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

如果您想要所有以 开头 的链接，您甚至可以使用像 a[href^='http://domain.example'] 这样的选择器http://domain.example':

var els = document.querySelectorAll("a[href^='http://domain.example']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

参见:DEMO

浏览器支持

根据 Can I use 截至 2016 年 6 月的浏览器支持看起来不错:

(有关最新信息，请参阅:http://caniuse.com/queryselector)

IE6 和 IE7 不支持，但是 IE6 is already deadIE7 很快就会有它的 0.68% market share 。

IE8 已经超过 7 年了，它部分 支持 querySelectorAll - 我所说的“部分”是指你可以像 [attr] 这样使用 CSS 2.1 selectors >、[attr="val"]、[attr~="val"]、[attr|="bar"] 和一个CSS 3 selectors 的一小部分幸运的是包括:[attr^=val]、[attr$=val] 和 [attr*=val] 所以看来 IE8我上面的例子没问题。

IE9、IE10 和 IE11 都支持 querySelectorAll 没有问题，Chrome、Firefox、Safari、Opera 和所有其他主要浏览器 - 桌面和移动设备.

换句话说，我们似乎可以安全地开始在生产中使用querySelectorAll。

更多信息

有关详细信息，请参阅:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
• http://caniuse.com/queryselector

另请参阅 this answer，了解 querySelectorAll、querySelector、queryAll 和 query 之间的区别以及它们何时被 < strong>从 DOM 规范中删除。