여러개를 제어할때 쓰는 querySelectorAll

 

탭메뉴 버튼 구현 (forEach 사용)

 

 

let itemList = document.querySelectorAll('li');
//querySelectorAll를 이용해 li를 전부 불러온다 (리스트형태로 itemList에 저장됨)

itemList.forEach(function(item){
  item.addEventListener('click',function(){
    itemList.forEach(function(e){
          e.classList.remove('active');
    });
    item.classList.add('active');
  });

});

 

리스트형태로 갖고 있기 때문에 forEach를 이용해 반복한다 
이때 item 은 itemList 의 1개를 지정 
즉
documetn.getElementsByTagName('li')[i]과 같은 의미로 i는 0번부터 마지막번째까지 반복한다

 

for문으로 바꾼다면 아래와 같다

var itemList = document.querySelectorAll('li');

for(let i =0; i < itemList.length; i++){
	itemList[i].addEventListener('click',function(){
    	for(let j =0; j < itemList.length; j++){
        	itemList[j].classList.remove('active');
        }
        itemList[i].classList.add('active');
    });
}

 

for문 사용

 

 

[javascript/javascript] - javascript 여러 엘리먼트에 한번에 이벤트리스너 등록하기