javascript - 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 秒，因为有很多链接。

但是，我只需要针对a具有特定 的 ' href，例如。“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');
}

a[href^='http://domain.com']如果您想要所有以开头的链接，您甚至可以使用选择器'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');
}

见：演示

浏览器支持

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

（有关最新信息，请参阅： http ://caniuse.com/queryselector）

IE6和IE7没有支持，但 IE6 已经死了 ，IE7 很快就会拥有0.68% 的市场份额。

IE8已经超过 7 年了，它部分支持 querySelectorAll - “部分”我的意思是你可以使用CSS 2.1 选择器，如[attr], [attr="val"],和CSS 3 选择器的一小部分，幸运的是包括： , ，所以看起来 IE8 是我上面的例子很好。[attr~="val"][attr|="bar"][attr^=val][attr$=val][attr*=val]

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

另请参阅此答案，了解它们从 DOM 规范querySelectorAll中删除时、、和之间的区别。querySelectorqueryAllquery

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 = "#";
    }
}

在具有更高 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:。