href的Javascript getElement？

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

见:DEMO

浏览器支持

根据我可以使用的浏览器支持截至2016年6月看起来相当不错:

(请参阅:http://caniuse.com/queryselector获取最新信息)

在IE6和IE7中没有支持,但 IE6已经死亡 ,IE7很快就会拥有0.68%的市场份额.

IE8是7岁以上,并部分支持querySelectorAll -由"部分"我的意思是,你可以使用CSS 2.1选择像[attr],[attr="val"],[attr~="val"],[attr|="bar"]和一小部分CSS 3选择哪个幸运的是包括: [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

另见这个答案之间的差额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 = "#";
    }
}

在具有更高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:在同一时间.