작은 자바 스크립트 솔루션 필요 :이 줄은 유효한 코드입니까?

Question

HTML 파일에서

, 나는이 같은 많은 문이 있습니다

<li class="menu"><a href="#">1st menu</a></li> 

그리고 자바 스크립트 파일을, 나는 다음과 같은 코드가 있습니다

1. function onload() 
2. { 
3. var lists=document.getElementsByTagName("li"); 
4. for(var i=0;i<lists.length;i++){ 
5.  if(lists[i].className=="menu"){ 
6.   lists[i].a.onclick=genmenu; 
7.  } 
8. } 
9. } 

function genmenu(){ 
    alert("this is an alert"); 
    return false; 
} 

문제는, 내가 클릭하면 링크 '첫 번째 메뉴', 그것은 경고를 표시하지 않습니다. 하지만 난 라인 (6) 및 쓰기 변경하는 경우 : 다음

lists[i].onclick=genmenu; 

이 링크 작업 및 쇼 경고를.

내 질문에, 왜 라인 6 (목록 [i]를 .a.onclick = genmenu) does'nt 사용할 수 있습니까? 유효한 코드가 아닌가?

Answer 1

a은 li의 속성이 아니며 중첩 태그입니다. 당신은 측면 참고로

lists[i].getElementsByTagName('a')[0]; 

를 사용할 필요가 당신의 리튬의 클래스 중 하나가 "메뉴 otherClass"인 경우가 더 이상 작동하지 않습니다 때문에 if(lists[i].className=="menu")에주의 것입니다. jQuery는 이것을 처리 할 수있는 좋은 방법이있다 : hasClass()하지만 jQuery를 사용하지 않는다면 비슷한 것을 작성하는 것이 쉽다.

Answer 2

당신은 다른 요소의 구성원으로 중첩 된 요소에 액세스 할 수 없습니다 :이 a의 이름으로 list[i] 요소의 멤버를 찾고 있습니다

lists[i].a 

- 그것은 내 앵커를 찾고 아니에요.

list[i].getElementsByTagName("a")[0]; 

Answer 3

는 최신 브라우저에 코드를 간단하고 효율적으로 할 수 있습니다 : 당신이 앵커를 원한다면, 당신은 쓸 것

function onload() { 
    var links = document.querySelectorAll ('li.menu a[href]'); 
    for (var i= links.length; i--;) { 
    links[i].addEventListener ('click', genmenu, false); 
    } 
} 

function genmenu() { 
    alert ("this is an alert"); 
    return false; 
} 

자세한 내용은 the documentation on querySelectorAll를 참조하십시오.