ejemplo - Javascript getElement por href?

getelementsbytagname

Question

Tengo el guion abajo

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

Sin embargo, esto busca en la página y tarda unos 20 segundos en hacerlo, ya que hay MUCHOS enlaces.

Sin embargo, solo necesito apuntar a las a que tienen un href específico, por ejemplo. "http://dominio.com/"

Así que, idealmente, me gustaría poder hacer esto de manera similar a jQuery, pero sin usar un marco. Así que algo como

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

¿Cómo haría esto para que solo busque los objetos con ese href coincidente?

Answer 1

Actualización 2016

Han pasado más de 4 años desde que se publicó esta pregunta y las cosas progresaron bastante.

No puedes usar:

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

pero lo que puedes usar es:

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

( Nota: ver más abajo para soporte de navegador)

lo que haría que el código de su pregunta funcionara exactamente como espera :

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

Incluso puedes usar selectores como a[href^=''http://domain.com''] si quieres todos los enlaces que comiencen con ''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'');
}

Ver: DEMO

Soporte del navegador

El soporte del navegador según Can I use a partir de junio de 2016 se ve bastante bien:

(Consulte: http://caniuse.com/queryselector para obtener información actualizada)

No hay soporte en IE6 e IE7, pero IE6 ya está muerto e IE7 pronto estará con su participación de mercado del 0,68% .

IE8 tiene más de 7 años y es parcialmente compatible con querySelectorAll. Por "parcialmente" quiero decir que puede usar selectores de CSS 2.1 como [attr] , [attr="val"] , [attr~="val"] , [attr|="bar"] y un pequeño subconjunto de selectores de CSS 3 que afortunadamente incluyen: [attr^=val] , [attr$=val] y [attr*=val] por lo que parece que IE8 está bien con mis ejemplos anteriores.

IE9 , IE10 e IE11 son compatibles con querySelectorAll sin problemas, al igual que Chrome , Firefox , Safari , Opera y todos los demás navegadores principales, tanto de escritorio como móviles .

En otras palabras, parece que podemos comenzar a usar de forma segura querySelectorAll en producción.

Más información

Para más información, ver:

• 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

Consulte también esta respuesta para conocer la diferencia entre querySelectorAll , querySelector , queryAll y query y cuándo se eliminaron de la especificación DOM .

Answer 2

La lectura y escritura de la propiedad innerHTML en cada elemento es probablemente bastante costosa y, por lo tanto, causa su ralentización: obliga al navegador a "serializar" el elemento, que luego ejecuta a través de una expresión regular, y luego "deserializar" de nuevo. Peor aún, lo estás haciendo para cada elemento, incluso si no coincide.

En su lugar, intente mirar directamente las propiedades del elemento 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 = "#";
    }
}

EDICIÓN en navegadores modernos con mucha mayor conformidad con W3C, ahora puede usar document.querySelectorAll() para obtener de manera más eficiente solo los enlaces que desea:

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

Sin embargo, esto no es tan flexible si hay varios nombres de dominio que desea hacer coincidir o, por ejemplo, si desea hacer coincidir http: y https: al mismo tiempo.