Как добавить target = "_ blank" в ссылку в div с определенным именем класса?

Question

Я пытаюсь добавить target = "_ blank" ко всем ссылкам в divs с определенным именем класса. Я знаю, как сделать это с 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'); 
    } 
} 

Но я пытаюсь повторить то же самое, используя классы вместо IDS. Любые идеи о том, как это сделать без jquery ?.

Спасибо, davanced!

Answer 1

Вы можете использовать querySelectorAll() и включить селектор CSS. Так что, если ваше имя класса канальный друг:

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 2

Вы можете использовать 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> элемент, который можно установить значения по умолчанию для всех тегов через:

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

Answer 3

Использование 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 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

Надеется, что это работает