[자바스크립트 문법] classList와 forEach()

classList

DOM의 속성으로 개별 클래스 관리할 때 사용한다. 클래스 하나만 조작 가능하고 DOM의 요소의 클래스명을 읽어오는 속성이다.

forEach()

forEach()는 각 배열의 요소에 콜백 함수를 한번씩 실행하는 메서드이다. 파라미터로 콜백함수를 갖고 배열 요소를 처음부터 끝까지 반복하며 각각의 요소에 함수를 실행한다. 보통 querySelectorAll() 전체 선택자를 활용하여 사용한다.

const list = document.querySelectorAll('li');

list.forEach((listItem) => {
	
    listItem.addEventListener('click', () => {
    	
        list.forEach((e) => {
        	e.classList.remove('active');
        });
        listItem.classList.add('active');
        
    });
    
});

 

- list 상수로 선언된 <li>는 DOM에서 여러개이므로 querySelectorAll()을 사용

- list는 여러개의 <li>를 가지고 있는 리스트 형태이기 때문에, forEach 반복문 사용

- forEach 반복문으로 listItem이라는 매개변수를 사용했는데, 이는 여러개의 <li>중에서 1개를 지정

- 그중 1개에 클릭 이벤트를 걸어서 콜백함수를 사용

- 콜백함수 안에는 또 list(여러개의 <li>)에 forEach 반복문을 사용

- list의 각각의 list에 active 클래스를 우선 제거하고, 이벤트 대상인 listItem에는 active를 추가한다.

 

 

참고

- 여러개를 제어할 때 쓰는 querySelectorAll

- className과 classList 차이