web-dev-qa-db-ja.com

Javascriptは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秒かかります。

ただし、特定のaを持つhrefのみをターゲットにする必要があります。 「http://domain.com/」

したがって、理想的には、jQueryと同様の方法で、フレームワークを使用せずにこれを実行できるようにしたいと考えています。のようなもの

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

一致するhrefを持つオブジェクトのみを検索するようにこれを行うにはどうすればよいですか？

javascripthrefgetelementsbytagname
37
Owen

2016年の更新

この質問が投稿されてから物事がかなり進歩してから4年以上が経ちました。

あなたは使用できません：

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

しかし、あなたがcanを使用するのは：

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']でstartするすべてのリンクが必要な場合は、'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月現在、 使用できる によるブラウザのサポートはかなり良く見えます：

caniuse.com/queryselector （最新情報については http://caniuse.com/queryselector を参照）

IE6およびIE7にはサポートはありませんが、 IE6はすでに死んでいます0.68%の市場シェア 。

IE8は7歳以上であり、partialallyはquerySelectorAllをサポートしています-「部分的に」では、 CSS 2.1を使用できることを意味しますselectors like [attr]、[attr="val"]、[attr~="val"]、[attr|="bar"]および CSS 3 selectors の小さなサブセット幸いなことにインクルード：[attr^=val]、[attr$=val]、および[attr*=val]だからIE8は上記の私の例で問題ないようです。

IE9、IE10およびIE11allsupportquerySelectorAll with no Chrome、Firefox、Safari、Operaおよびallその他の主要なブラウザ-デスクトップとモバイルの両方。

つまり、本番環境でquerySelectorAllの使用を安全に開始できるようです。

詳細情報

詳細については、以下を参照してください。

querySelectorAll、querySelector、queryAll、およびqueryの違い、およびそれらがいつだったかについては、 この回答 も参照してください。 DOM仕様から削除。

68
rsp

すべての要素のinnerHTMLプロパティの読み取りと書き込みはおそらく非常に高価であるため、速度が低下します。ブラウザは要素を「シリアル化」し、その後、正規表現を実行してから「逆シリアル化」します。さらに悪いことに、everya要素に対して、それが一致していなくても実行しています。

代わりに、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 = "#";
    }
}
_

[〜＃〜] edit [〜＃〜]はるかに優れた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:_の両方を同時に一致させる場合など、これはそれほど柔軟ではありません。

20
Alnitak