Почему не работает 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');
  }

});

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

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

});