Javascript通过href获取Element?

时间:2012-05-13 15:00:00

标签: javascript href getelementsbytagname

我有下面的脚本

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']");

的对象

2 个答案:

答案 0 :(得分:62)

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的浏览器支持 看起来很不错:

caniuse.com/queryselector (参见: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

更多信息

有关详细信息,请参阅:

另请参阅http://caniuse.com/queryselector了解querySelectorqueryAllquery <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规范中删除< /强>

答案 1 :(得分:20)

在每个元素上读取和写入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:,则不会如此灵活。