동적으로 클래스 조회, 추가, 삭제 하기

classList, className

classList, className 을 이용하여 요소에 적용된 클래스를 조회할 수 있습니다.

classList 는 요소의 적용된 클래스를 리스트 형식으로 반환해주는 속성입니다.
className 는 classList 를 공백으로 구분시킨 문자열입니다.

추가, 삭제

classList 의 add, remove 함수를 이용하여 클래스를 동적으로 추가하고 제거할 수 있습니다.

classList.add("className"): 지정한 클래스를 추가해줍니다.
classList.remove("className"): 지정한 클래스를 제거합니다.

간단한 예제를 아래와 같이 만들 수 있습니다.
classList.contains 를 이용하여 클래스가 있는 경우에는 제거하고 없는 경우에는 추가해줘봅시다.
contains 는 해당 클래스를 가지고 있는지 검색해줍니다. 있으면 true, 없으면 false 입니다.

const cName = Node.classList;

if (classList.contains('CLexample')) {  // CLexample 이 있는지 검사..
  classList.remove("CLexample");        // CLexample 지움.
} else {
  classList.add("CLexample");            // CLexample 추가.
}