Why doesn't getElementByClassName -> getElementsByTagName -> setAttribute work?

Question

I want open certain links in a new tab. Since I can't set it directly into the <a> tag, I want to put the link into <span> tags with a certain class name and set the target attribute via JavaScript.

I thought this would be easy, but I can't get it working:

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

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

What am I doing wrong?

Answer 1

document.getElementByClassName does not exist, the correct function is document.getElementsByClassName (note the extra s ). It returns an array of matching nodes, so you've to give an index:

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

Answer 2

but you might need to iterate through every span with the specified class ('newTab') on the page for it to work:

addOnLoadHook(function(){

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

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

});

in case you'll have more than 1 anchor tag in a span you'd also have to iterate through the anchor tags like this:

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

});