HTML 태그의 속성 중에 class 속성은 자바스크립트의 class와 헷갈리는 것을 막기 위해 속성의 이름으로 class 대신 className을 사용합니다.

태그.className = '클래스1 클래스2 ...';

이렇게 하면 해당 태그에 class 속성이 적용됩니다. 이때 태그의 기존 클래스는 전부 사라지므로 불편합니다. 예를 들어, 어떤 태그의 클래스가 ‘클래스1 클래스2’였다면 className 속성을 ‘클래스3 클래스4’로 수정하는 순간 ‘클래스1 클래스2’는 사라지고 ‘클래스3 클래스4’가 태그의 클래스가 됩니다.

태그.className = '클래스1 클래스2';
태그.className = '클래스3 클래스4';
태그.className; // 클래스3 클래스4

그래서 기존 클래스에 새로운 클래스를 추가하거나 삭제하려면 태그.classList 객체를 사용하는 것이 좋습니다. 태그.classList 객체는 태그에 붙은 클래스를 조작하는 여러 메서드를 제공합니다. 태그에 해당 클래스가 존재하는지 확인할 때는 contains() 메서드를 사용합니다.