Javascript getElement par href?

j'ai le script ci-dessous 

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

cependant ceci recherche à travers la page et prend environ 20 secondes pour le faire car il y a beaucoup de liens.

cependant, je n'ai besoin de cibler que les a 's qui ont un href spécifique , par exemple. "http://domain.com 151960920"

donc idéalement, j'aimerais pouvoir le faire de la même manière que jQuery, mais sans utiliser de cadre. Donc quelque chose comme 

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

Comment faire pour qu'il ne cherche que les objets correspondant à href ?

28
demandé sur Alexis Pigeon 2012-05-13 18:59:59

2 réponses

mise à jour 2016

Cela fait plus de 4 ans que cette question a été affichée et les choses ont beaucoup progressé.

Vous ne peut pas utiliser: 

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

mais ce que vous peut utiliser: 

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

( Note: voir ci-dessous pour le support du navigateur)

qui ferait le code de votre question travailler exactement comme vous vous attendez : 

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

vous pouvez même utiliser des sélecteurs comme a[href^='http://domain.com'] si vous voulez tous les liens que démarrer avec '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');
}

Voir: DÉMO

prise en charge du Navigateur

le support du navigateur selon puis-je utiliser à partir de juin Deux mille seize

caniuse.com/queryselector (Voir: http://caniuse.com/queryselector pour des informations à jour)

Il n'y a pas de soutien dans IE6 et IE7 mais IE6 est déjà mort et IE7 sera bientôt avec son 0,68% de part de marché .

IE8 est plus de 7 ans et il en partie soutient querySelectorAll - par "en partie" je veux dire que vous pouvez utiliser CSS 2.1 sélecteurs comme [attr] , [attr="val"] , [attr~="val"] , [attr|="bar"] et un petit sous-ensemble de CSS 3 sélecteurs qui heureusement comprennent: [attr^=val] , [attr$=val] , et [attr*=val] ainsi il semble que IE8 est d'accord avec mes exemples ci-dessus.

IE9 , IE10 and IE11 all support querySelectorAll with no problems, as do Chrome , Firefox , Safari , Opera et tout autre navigateur important - à la fois de bureau et mobile .

En d'autres termes, il semble que nous pouvons commencer à utiliser querySelectorAll dans la production.

plus d'information

pour plus d'informations, voir:

Voir aussi cette réponse pour la différence entre querySelectorAll , querySelector , queryAll et query et quand ils ont été retiré de la spécification DOM .

46
répondu rsp 2016-07-07 12:39:01

la lecture et l'écriture de la propriété innerHTML sur chaque élément est probablement très chère et donc à l'origine de votre ralentissement - cela force le navigateur à" sérialiser "l'élément, que vous exécutez ensuite à travers un regexp, puis à" deserialiser " à nouveau. Pire encore, vous le faites pour chaque élément a , même s'il ne correspond pas.

plutôt, essayez de regarder directement les propriétés de l'élément 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 sur les navigateurs modernes avec une conformité W3C beaucoup plus grande, vous pouvez maintenant utiliser document.querySelectorAll() pour obtenir plus efficacement juste les liens que vous voulez: 

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 = '#';
}

ce n'est toutefois pas aussi flexible s'il y a plusieurs noms de domaine que vous souhaitez associer, ou par exemple si vous voulez associer à la fois http: et https: .

18
répondu Alnitak 2016-06-15 11:52:20