className vs classList (JavaScript 코드 예제)

HTML

<div class="old-class">
  <h1>Hello World!</h1>
</div>

 

Javascript

 

1 ) className 속성 사용

// 요소 선택
const element = document.querySelector(".old-class");

// 클래스 이름 변경
element.className = "new-class";

 

2) classList 속성을 사용

 

2-1. 클래스 추가 (add)

element.classList.add("new-class");

 

2.2. 클래스 제거 (remove)

element.classList.remove("old-class");

 

 

2.3. 클래스 교체 (replace)

element.classList.replace("old-class", "new-class");

 

2.4. 클래스 토글 (toggle)

element.classList.toggle("old-class"); // old-class 클래스가 있으면 제거, 없으면 추가

추가Tip!

 className  vs  classList 

• className은 전체 클래스를 한 번에 변경할 때 유용.
• classList는 클래스를 개별적으로 추가, 제거, 토글할 때 더 세밀하게 작업 가능.

classList를 사용하는 것이 더 안전하고 가독성이 좋습니다. 😊