为什么不 getElementByClassName -> getElementsByTagName ->; setAttribute 工作吗？

Question

我想在新选项卡中打开某些链接。由于我无法将其直接设置到 标记中，因此我想将链接放入具有特定类名的 标记中，并设置通过 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');
    }
  }

});