JavaScript 접기 메뉴 트리

Question

이것은 메뉴 트리에 대한 JavaScript 기능입니다. 하위 메뉴 하나만이 아니라 하위 메뉴를 추가하고 싶습니다. x.all[0]과 x.all[2]은 무엇입니까?

var head="display:''" 
img1=new Image() 
img1.src="fold.gif" 
img2=new Image() 
img2.src="open.gif" 

function change(){ 
if(!document.all) 
return 
if (event.srcElement.id=="folding"){ 
var x=event.srcElement.parentElement 
if (x.all[2].style.display=="none"){ 
x.all[0].src="open.gif" 
x.all[2].style.display='' 
alert(x.all[2].name) 
} 
else{ 
x.all[0].src="fold.gif" 
x.all[2].style.display="none" 
} 

} 
document.onclick=change 

Answer 1

all은 특정 요소에 속한 하위 요소의 모음입니다. document.all은 문서의 모든 요소를 ​​반환합니다. 이것은 IE 전용 기능이며 다른 브라우저에서는 작동하지 않습니다.

코드에서 x은 event.srcElement.parentElement이므로 all 속성은 해당 부모 요소에 속한 모든 하위 요소입니다. [0]은 컬렉션의 첫 번째 요소를 반환하고 [2]은 컬렉션의 세 번째 요소를 반환합니다.

앞에서 언급했듯이이 코드는 Internet Explorer에서만 작동하므로 더 나은 브라우저 호환성을 원할 경우 수행하려는 작업을 수행하기 위해 다른 크로스 브라우저 방법을 탐색해야합니다.