elem.className에 무언가를 대입하면 클래스 문자열 전체가 바뀐다. 그런데 이렇게 속성값 전체를 바꾸는 게 아니고 클래스 하나만 추가하거나 제거하고 싶은 경우도 존재한다.
이럴 때 elem.classList라는 프로퍼티를 사용할 수 있다.
elem.classList엔 클래스 하나만 조작하게 해주는 메서드인 add/remove/toggle가 구현되어 있다.
이렇게 클래스 속성값 전체를 바꾸고 싶을 때는 className으로, 개별 클래스를 조작하고 싶을 때는 classList를 사용하면 된다.
classList에 구현된 메서드는 다음과 같다.
- elem.classList.add/remove("class") – class를 추가하거나 제거
- elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
- elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환
이 외에 classList는 이터러블 객체이기 때문에 아래 예시와 같이 for..of를 사용해 클래스를 나열할 수 있다는 특징이 있다.
