javascript - 为什么 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');
    }
  }

});