I´m trying to add target=“_blank” to all the links within the divs with an specific class name. I know how to do it with an 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'); } } But i´m trying to replicate the same, using classes instead of IDS. Any ideas of a how to do this without jquery?.
Thanks in davanced!
You can use querySelectorAll() and include a CSS selector. So if your class name is 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>
.forEach is not a method on a NodeList.
Run code snippet to see that this does indeed work. For more information see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
document.querySelectorAll() returns a NodeList according to the DOM spec.Use querySelectorAll and loop just like you did.
var anchors = document.querySelectorAll(".link_other a"); Or you can use getElementsByClassName and nested loops.
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'); } } You can use document.querySelectorAll() which takes a css expression:
var anchors = document.querySelectorAll('.my_class a'); for (var i=0; i<anchors.length; i++){ anchors[i].setAttribute('target', '_blank'); } Or (ab)using the array prototype:
[].forEach.call(document.querySelectorAll('.my_class a'), function(el) { el.setAttribute('target', '_blank'); }); You should also consider using addEventListener instead of window.onload:
window.addEventListener('load', function() { // ... }); Or the more appropriate:
document.addEventListener('DOMContentLoaded', function() { // ... }); You can also use the old school <base> element which will can set defaults for all a tags:
var base_el = document.createElement('base'); base_el.setAttribute('target', '_blank'); document.head.appendChild(base_el); To achieve your expected result use below option
var addList = document.querySelectorAll('.link_other a'); for(var i in addList){ addList[i].setAttribute('target', '_blank'); } Codepen - http://codepen.io/nagasai/pen/QEEvPR
Hope it works
