관리 메뉴

번데기 개발자의 메모장

child node 본문

카테고리 없음

child node

번데기 개발자 2018. 8. 9. 16:57
반응형

childNodes 예제 분석






id값이 navigation인 엘리먼트들을 nav에 대입합니다.

반복문을 childNodes 속성을 이용하여 자식의 숫자만큼 1씩 증가시킵니다. (DOM 속성)

childNodes는 각 엘리멘트들을 배열의 요소로 가지고 있는 DOM 속성입니다.


child라는 변수를 선언하고 childNodes의 인덱스 값을 가져옵니다.


child의 nodeType을 체크합니다.

브라우저마다 공백도 li요소로 처리 할 수 있기때문에 nodeType==3 을 이용하여 공백을 체크한 뒤 공백은 건너 뛰도록 설정합니다.


이후 addEvent함수를 다시 선언합니다. 

첫번째 인자로 child, 두번째 인자로 'click' 세번째 인자로 clickHandler를 전달합니다.

li 엘리먼트를 누군가 클릭했을때 클릭 함수의 로직(ClickHandler)가 실행 되도록 설정한다고 할 수 있습니다.






child.className에 공백을 대입합니다. 

즉 현재 child는 li의 배열의 각각의 값인데 className을 제거합니다.

즉 <li class=""> 이렇게 바꿔준다고 할 수 있습니다.


이후 event객체를 전달하는데 (시스템이 해주는 역활) 이 event객체에는 target이라는 속성이 들어 있습니다.

target에는 사용자가 클릭한 엘리먼트에 대한 값이 들어 있습니다.

클릭한 li의 className만 selected로 바꿔주는 동작을 수행합니다. 








반응형
0 Comments
댓글쓰기 폼