jquery에서 pure 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> 

어떻게 이것을 순수한 자바 스크립트로 작성합니까? 다음은 jQuery 코드입니다.

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

어떤 이유로 나는 순수한 자바 스크립트로 코드를 작성해야합니다. 특히, 나는 각 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'; 
}