바닐라 js - tab

#탭메뉴

++console.log(e.currentTarget, e.target);
핵심은 currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다!
즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 
내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다. 

*querySelector는 해당 셀렉터 내용 중 제일 첫 번째 것만 선택 되므로 querySelectorAll을 써서 모두 가져온다. 따라서 배열로 담기므로 forEach로 반복문으로 처리해야 한다.

배열처럼 보이나(유사배열) 사실 NodeList로 담긴다. 각각의 칸에는 인덱스로 접근해야한다.

++배열로 바꾸는 방법 참고

https://llnote.tistory.com/798?category=627411 

[Javascript] querySelectorAll을 배열로 만들기

**더나아가기

const UL = document.querySelector("nav ul");
const LI = [...UL.children][1]; //칠드런 나열 - 배열[인덱스번호]

//위처럼 작성 가능하다!
//[...UL.children][1]는 li의 인덱스 1번을 가져온다