Почему getElementByClassName -> getElementsByTagName -> setAttribute не работает?

Question

Я хочу открыть определенные ссылки на новой вкладке. Поскольку я не могу установить его непосредственно в тег <a>, я хочу поместить ссылку в теги <span> с определенным именем класса и установить целевой атрибут через JavaScript.

Я думал, что это будет легко, но я не могу заставить его работать:

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

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

Что я делаю неправильно?

Answer 1

document.getElementByClassName не существует, правильная функция document.getElementsByClassName (обратите внимание на дополнительные s). Она возвращает массив соответствующих узлов, так что вы, чтобы дать индекс:

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

Answer 2

но вы, возможно, придется перебирать каждый промежуток с указанным классом («newTab») на странице для того, чтобы работать:

addOnLoadHook(function(){ 

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

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

}); 

в случае, если вы будете иметь больше, чем один якорь тег в пролете вы также должны перебирать якорных тегов, как это:

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

});