HTML요소의 class속성을 다루기위한 배열
const btn = document.querySelector("button");
btn.className = "clicked";
위와 같이 단순히 className을 변경할 경우 원래 있던 클래스는 무시하고 변경된 클래스만 가지게 된다.
classList는 요소가 가지고 있는 클래스의 배열이다.
btn.classList.contains("clicked"); //true
btn.classList.add("overed");
btn.classList.remove("clicked");
contains는 해당 클래스명을 가지고있는지 판단할 수 있고
add와 remove로 classList에 삽입, 삭제할 수 있다.
btn.classList.toggle("clicked");
toggle은 해당 클래스명이 이미 있으면 삭제하고, 없다면 추가해주는 프로퍼티다.