我有下面的脚本
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']");
?
答案 0 :(得分:62)
自这个问题发布以来已经过去了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很好。
换句话说,似乎我们可以安全地开始在生产中使用querySelectorAll
。
有关详细信息,请参阅:
另请参阅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>
之间的差异以及
答案 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:
,则不会如此灵活。