Pourquoi getElementByClassName -> getElementsByTagName -> setAttribute ne fonctionne-t-il pas?

Question

Je veux ouvrir certains liens dans un nouvel onglet. Comme je ne peux pas le définir directement dans la balise <a>, je souhaite placer le lien dans les balises <span> avec un certain nom de classe et définir l'attribut cible via JavaScript.

Je pensais que ce serait facile, mais je ne peux pas le faire fonctionner:

addOnloadHook(function() { 
    document.getElementByClassName('newTab').getElementsByTagName('a').setAttribute('target', '_blank'); 
}); 

<span class="newTab"><a href="http://www.com">Link</a></span> 

Qu'est-ce que je fais mal?

Answer 1

document.getElementByClassName n'existe pas, la fonction correcte est document.getElementsByClassName (notez le supplément s). Elle retourne un tableau de noeuds correspondant, de sorte que vous avez à donner un indice:

addOnloadHook(function() { 
    document.getElementsByClassName('newTab')[0].getElementsByTagName('a')[0].setAttribute('target', '_blank'); 
}); 

Answer 2

mais vous pourriez avoir besoin de parcourir toutes les travées avec la classe spécifiée (« newtab ») sur la page pour que cela fonctionne:

addOnLoadHook(function(){ 

    var span = document.getElementsByClassName('newTab'); 

    for(var i in span) { 
    span[i].getElementsByTagName('a')[0].setAttribute('target','_blank'); 
    } 

}); 

au cas où vous aurez plus de 1 balise d'ancrage dans une période que vous souhaitez également devez parcourir les balises d'ancrage comme celui-ci:

addOnLoadHook(function(){ 

    var span = document.getElementsByClassName('newTab'); 

    for(var i in span){ 
    var a = span[i].getElementsByTagName('a'); 
    for(var ii in a){ 
     a[ii].setAttribute('target','_blank'); 
    } 
    } 

});