href的Javascript getElement？ [英] Javascript getElement by href?

问题描述

我有下面的脚本

  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秒来完成有很多链接。

但是我只需要定位具有特定<$ c的 a $ c> href ，例如。 http://domain.com/

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

  var els = document.getElementsByTagName（a [href ='http：//domain.com'] ）; 
  

我将如何执行此操作，以便仅搜索匹配 href ？

解决方案

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

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

IE6 和 IE7 不支持，但
IE6已经死了
和IE7很快就会出现在 0.68％的市场份额。

IE8 超过7年，部分支持querySelector全部 - 部分我的意思是你可以使用 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 和查询以及何时从DOM规范中删除。

I've got the script below

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

However this searches through the page and takes about 20 seconds to do it as there are LOTS of links.

However I only need to target the a's that have a specific href, for eg. "http://domain.com/"

So ideally I'd like to be able to do this in a similar fashion to jQuery, but without using a framework. So something like

var els = document.getElementsByTagName("a[href='http://domain.com']");

How would I go about doing this so it only searches the objects with that matching href?

解决方案

2016 update

It's been over 4 years since this question was posted and things progressed quite a bit.

You can't use:

var els = document.getElementsByTagName("a[href='http://domain.com']");

but what you can use is:

var els = document.querySelectorAll("a[href='http://domain.com']");

(Note: see below for browser support)

which would make the code from your question work exactly as you expect:

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

You can even use selectors like a[href^='http://domain.com'] if you want all links that start with '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');
}

See: DEMO

Browser support

The browser support according to Can I use as of June 2016 looks pretty good:

(See: http://caniuse.com/queryselector for up to date info)

There is no support in IE6 and IE7 but IE6 is already dead and IE7 soon will be with its 0.68% market share.

IE8 is over 7 years old and it partially supports querySelectorAll - by "partially" I mean that you can use CSS 2.1 selectors like [attr], [attr="val"], [attr~="val"], [attr|="bar"] and a small subset of CSS 3 selectors which luckily include: [attr^=val], [attr$=val], and [attr*=val] so it seems that IE8 is fine with my examples above.

IE9, IE10 and IE11 all support querySelectorAll with no problems, as do Chrome, Firefox, Safari, Opera and all other major browser - both desktop and mobile.

In other words, it seems that we can safely start to use querySelectorAll in production.

More info

For more info, see:

• 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

See also this answer for the difference between querySelectorAll, querySelector, queryAll and query and when they were removed from the DOM specification.

这篇关于href的Javascript getElement？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！