Javascript getElement by 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.com/"

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

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

我该怎么做才能只搜索与href匹配的对象？

Answer 1

2016 年更新

这个问题发布已经 4 年多了，事情有了很大进展。

您不能使用：

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

但您可以使用的是：

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

（注意：浏览器支持见下文）

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

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

如果你想要所有以'http://domain.com'开始的链接，你甚至可以使用a[href^='http://domain.com']之类的选择器：

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

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

见：DEMO

浏览器支持

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

（请参阅：http://caniuse.com/queryselector 了解最新信息）

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

IE8 已超过 7 年，它部分支持 querySelectorAll - “部分”是指您可以使用 CSS 2.1 selectors，如 [attr]、[attr="val"] 、[attr~="val"]、[attr|="bar"] 和 CSS 3 selectors 的一小部分，幸运的是包括： [attr^=val]、[attr$=val] 和 [attr*=val] 所以 IE8 似乎适合我上面的示例。

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

换句话说，我们似乎可以安全地开始在生产环境中使用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 之间的区别以及它们被从 DOM 规范中删除的时间。

Answer 2

在每个元素上读取和写入innerHTML 属性可能非常昂贵，因此会导致您的速度变慢 - 它会迫使浏览器“序列化”元素，然后您通过正则表达式运行该元素，然后再次“反序列化”。更糟糕的是，您正在为 每个 a 元素执行此操作，即使它不匹配。

请尝试直接查看a 元素的属性：

var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === 'http://www.example.com/') {
        el.innerHTML = "dead link";
        el.href = "#";
    }
}

EDIT 在具有更高 W3C 一致性的现代浏览器上，您现在可以使用 document.querySelectorAll() 更有效地获取您想要的链接：

var els = document.querySelectorAll('a[href^=http://www.example.com/]');
for (var i = 0, l = els.length; i < l; i++) {
    els[i].textContent = 'dead link';
    els[i].href = '#';
}

但是，如果您希望匹配多个域名，或者例如，如果您想同时匹配 http: 和 https:，则此方法就不那么灵活了。