конвертировать код из jquery в чистый javascript

Question

Я хочу, чтобы некоторые петли, и добавить число в href, так что это будет что-то вроде x.php&ref=333.

<div id="maindiv"> 
<span><a href="x.php&ref="></a></span> 
<span><a href="x.php&ref="></a></span> 
<span><a href="x.php&ref="></a></span> 
</div> 

Как написать это в чистом javascript? Вот код JQuery:

$('#maindiv a').each(function(){ 
var hr = $(this).attr('href'); 
$(this).attr('href' , hr+333); 
}) 

По какой-то причине я не могу использовать, что и нужно писать код в чистом JavaScript. В частности, я не знаю, как получить каждый элемент a.

Answer 1

Pure JS версии:

Вариант Один

// Get div element. jQuery equivalent: $('#maindiv') 
var mainDiv = document.getElementById("maindiv"); 

// Get all anchors in element. jQuery equivalent: $('#maindiv a') (or many others) 
var myAnchors = mainDiv.getElementsByTagName("a"); 

// Loop through each anchor element and update href 
for (var i = 0; i < myAnchors.length; i++) { 
    myAnchors[i].href = myAnchors[i].href + "YourString"; 
}​ 

Вариант второй (чуть-чуть менее читаемым)

// Get div element and corresponding anchors. jQuery equivalent: $('#maindiv a') 
var myAnchors = document.getElementById("maindiv").getElementsByTagName("a"); 

// Loop through each anchor element and update href 
for (var i = 0; i < myAnchors.length; i++) { 
    myAnchors[i].href = myAnchors[i].href + "YourString"; 
}​ 

Additiona л Информация

Отъезд document.getElementById и element.getElementsByTagName ON MDN.

Answer 2

Попробуйте это.

var anchors = document.getElementById("maindiv").getElementsByTagName("a"); 
for(var i = 0; i < anchors.length;i++){ 
    anchors[i].href = anchors[i].href + "333"; 
} 

document.getElementById возвращает элемент с идентификатором соответствия в документе.

document.getElementsByTagName возвращает элемент с соответствующим тегом внутри документа. Но если вы вызовете getElementsByTagName на уже выбранном элементе, как показано выше, он будет выглядеть внутри этого элемента.

Answer 3

var els = document.querySelectorAll('#maindiv a'); 
for (var i = 0; i < els.length; i++) { 
    var hr = els[i].href; 
    els[i].href = hr + 333; 
} 

Answer 4

Это должен быть самый чистый способ сделать это.

var links = document.getElementById('maindiv').getElementsByTagName('a'); 
for (i in links) { 
    links[i].href = links[i].href + '333'; 
}