JS 질문있습니다!

Question

JS 질문있습니다!아래 코드는 a태그를 클릭하면 해당 형제요소 중 몇번째 a태그인지 숫자를 alert로 출력하는 코드인데, // function(idx) 을 반복한다. // onclick 시 해당 함수 실행 // 그 함수는 alert이렇게 이해는 되는데,저기 (i) 는 왜 있는 것인지,, 그리고 어떻게 해당 a태그를 클릭했을 때 몇 번째 요소인지가 반영이 되는지잘 이해가 되지않습니다 ㅠㅠ (편집됨) 다른 사람의 코드라서 어떻게 작동하는지 부분적으로만 이해되네요.. 제목 없음 const A &#61; document.body.getElementsByTagName('a'); // 태그 이름으로 불러온다.for (i &#61; 0; i < A.length; i&#43;&#43;) { (function(idx) { A[idx].onclick &#61; function() { alert(idx); } })(i);}

토끼왕 · Answer

const A &#61; document.body.getElementsByTagName('a'); // 태그 이름으로 불러온다. for (i &#61; 0; i < A.length; i&#43;&#43;) { (function(idx) { // i 로부터 받은 값 A[idx].onclick &#61; function() { // A의 현재 인덱스에 위치한 태그에 클릭이벤트 부착 alert(idx); // idx 함수 인자로 넘어온 i 값 } })(i); // 0 부터 ~ A의 길이 - 1 까지의 정수 }

ruinnel · Answer

클로져에 대한 개념을 확인하시면(아래 링크 참조) 이해가 가시지 않을까 싶네요.https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 요약: 함수가 만들어질(?)때 상태를 보존(?) 하기때문에 잘 동작(?) 합니다. ㅎㅎ

상저씨 · Answer

즉시실행함수에 대해 생소하셔서 그런것같아요 찾아보세요!

헤롱헤롱 · Answer

근데,,, a태그를 불러왔는데, nth-child 같은 걸 쓰지않더라도 바로 A태그[index] 를 사용할 수 있는게 모든 변수들을 불러올때, 다 배열인 형태로 불러오기 때문에 그런가요???

토끼왕 · Answer

&#64;헤롱헤롱 MDN 문서를 읽어보면 이런내용이 있습니다. A태그에 인덱스를 사용할 수 있는건 getElementsByTagName 함수가 HTMLCollection 을 반환하기 때문입니다. elements is a live HTMLCollection of elements with a matching tag name, in the order they appear. If no elements are found, the HTMLCollection is empty.https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

JS 질문있습니다!

5개의 답변

#a 목록