javascript - 将代码从 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

纯 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";
}​

附加信息

查看 document.getElementById和 element.getElementsByTagName在 MDN 上。