如何将 target=“_blank” 添加到具有特定 class 名称的 div 中的 link？

Question

我正在尝试将 target=“_blank” 添加到具有特定 class 名称的 div 中的所有链接。我知道如何使用 ID：

window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}

但我正在尝试使用 classes 而不是 IDS 来复制相同的内容。关于如何在没有 jquery 的情况下执行此操作的任何想法？

感谢达文！

Answer 1

您可以使用 document.querySelectorAll()，它采用 css 表达式：

var anchors = document.querySelectorAll('.my_class a');
for (var i=0; i<anchors.length; i++){
  anchors[i].setAttribute('target', '_blank');
}

或（ab）使用数组原型：

[].forEach.call(document.querySelectorAll('.my_class a'), function(el) {
  el.setAttribute('target', '_blank');
});

您还应该考虑使用 addEventListener 而不是 window.onload:

window.addEventListener('load', function() {
  // ...
});

或者更合适的：

document.addEventListener('DOMContentLoaded', function() {
  // ...
});

您还可以使用老式 <base> 元素，它可以为所有 a 标签设置默认值：

var base_el = document.createElement('base');
base_el.setAttribute('target', '_blank');
document.head.appendChild(base_el);

Answer 2

使用 querySelectorAll 并像您一样循环。

var anchors = document.querySelectorAll(".link_other a");

或者您可以使用 getElementsByClassName 和嵌套循环。

var parents = document.getElementsByClassName(".link_other");
for (var i = 0; i < parents.length; i++) {
    var anchors = parents[i].getElementsByTagName("a");
    for (var j = 0; j < anchors.length; j++) {
        anchors[j].setAttribute('target', '_blank');
    }
}

Answer 3

您可以使用 querySelectorAll() 并包含一个 CSS 选择器。所以如果你的 class 名字是 link-other:

document.querySelectorAll('.link-other a')
  .forEach(function(elem) {
    elem.setAttribute('target', '_blank');
  })

<div class="link-other"> 
  <a href="http://wikipedia.com">Wikipedia</a>
  <a href="http://google.com">Google</a>
</div>

Answer 4

要达到预期结果，请使用以下选项

        var addList = document.querySelectorAll('.link_other a');

    for(var i in addList){
     addList[i].setAttribute('target', '_blank');
    }

Codepen - http://codepen.io/nagasai/pen/QEEvPR

希望有用

如何将 target=“_blank” 添加到具有特定 class 名称的 div 中的 link？

How do I add target=“_blank” to a link within a div with an specific class name?

javascript

class

hyperlink

target