Javascript通过href获取Element？

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的{​​{1}}，例如。 “http://domain.com/”

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

这样的东西

href

我将如何执行此操作，以便仅搜索具有匹配var els = document.getElementsByTagName("a[href='http://domain.com']"); ？

的对象

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');
}

请参阅：DEMO

浏览器支持

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

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

IE6 和 IE7 没有支持，但是 IE6 is already dead IE7很快就会出现0.68% market share。

IE8 已超过7年且部分支持querySelectorAll - “部分”我的意思是您可以[attr]使用[attr="val"] ，[attr~="val"]，[attr|="bar"]，[attr^=val]以及幸运包含的CSS 2.1 selectors的一小部分： [attr$=val]，[attr*=val]和querySelectorAll所以上面的示例似乎IE8很好。

IE9 ， IE10 和 IE11 所有支持 querySelectorAll没有任何问题， Chrome < / strong>， Firefox ， Safari ， Opera 和所有其他主要浏览器 - 桌面和移动设备

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

更多信息

有关详细信息，请参阅：

• CSS 3 selectors
• 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了解querySelector，queryAll，query和 <reference name="left"> <action method="unsetChild"><name>umm.sidemenu</name></action> <action method="insert"> <blockName>umm.sidemenu</blockName> <siblingName>block_left_top</siblingName> <after>1</after> </action> </reference> 之间的差异以及从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 = "#";
    }
}

在具有更高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:，则不会如此灵活。