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で記述しますか？

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

私はそれを使用して、純粋なJavaScriptでコードを記述する必要はないことができるいくつかの理由：ここではjQueryのコードです。 具体的には、私はどのように各a要素を取得するのか分かりません。

Answer 1

ピュアJSバージョン：

オプション1

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

オプション2（ほんの少し読みにくく）

// 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 l情報

オンMDNのdocument.getElementByIdとelement.getElementsByTagNameをチェックしてください。

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文書内のIDと一致する要素を返します。

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'; 
}