className과 classList의 차이

className과 classList는 둘 다 HTML 요소의 class 속성을 다루는 방법을 제공하지만, 사용하는 방식과 기능 면에서 차이가 있습니다.

 

1. className

• className은 요소의 class 속성을 문자열 형태로 다루는 프로퍼티입니다.
• 전체 class 값을 한 번에 설정하거나 덮어쓸 때 사용됩니다.

특징:

• 문자열 기반: 요소에 적용된 모든 클래스가 공백으로 구분된 단일 문자열로 나타납니다.
• 덮어쓰기: 값을 설정하면 기존의 클래스를 모두 대체합니다.
• 단순하지만, 개별 클래스를 추가/삭제하거나 상태를 관리하기는 불편합니다.

예제:

<div id="example" class="class1 class2"></div>

 

const element = document.getElementById('example');  // 클래스 전체 가져오기  console.log(element.className); // "class1 class2"  // 클래스 덮어쓰기  element.className = "newClass";  console.log(element.className); // "newClass"  // 기존 클래스 유지하며 추가  element.className += " anotherClass";  console.log(element.className); // "newClass anotherClass"

 

 

---

2. classList

• classList는 토큰 리스트(DOMTokenList) 객체로, 요소의 class 속성을 배열처럼 다룰 수 있게 합니다.
• 개별 클래스를 추가, 제거, 토글하거나 확인하는 데 적합합니다.

특징:

• 메서드 기반: 클래스를 조작하기 위한 유용한 메서드(add, remove, toggle, contains)를 제공합니다.
• 유연성: 클래스를 하나씩 추가하거나 삭제할 수 있어 상태 관리가 더 직관적입니다.
• 기존 클래스를 덮어쓰지 않고도 쉽게 조작 가능.

메서드:

• add(className): 클래스를 추가. 이미 존재하면 무시.
• remove(className): 클래스를 제거.
• toggle(className): 클래스가 있으면 제거하고, 없으면 추가.
• contains(className): 특정 클래스가 있는지 확인. (true/false 반환)

예제:

<div id="example" class="class1 class2"></div>

 

const element = document.getElementById('example');  // 클래스 추가  element.classList.add('newClass');  console.log(element.className); // "class1 class2 newClass"  // 클래스 제거  element.classList.remove('class1');  console.log(element.className); // "class2 newClass"  // 클래스 토글  element.classList.toggle('class2');  // 제거  console.log(element.className); // "newClass"  element.classList.toggle('class2'); // 추가  console.log(element.className); // "newClass class2"  // 클래스 포함 여부 확인  console.log(element.classList.contains('class2')); // true  console.log(element.classList.contains('class3')); // false

 

 

---

3. 차이점 요약

 

특징	className	classList
데이터 형식	공백으로 구분된 문자열	DOMTokenList (배열처럼 동작)
사용 방식	전체 class 값을 설정하거나 읽기	개별 class를 추가, 삭제, 토글, 확인 가능
유연성	덮어쓰기가 기본 동작	기존 클래스 유지하며 개별 조작 가능
주요 메서드	없음	add, remove, toggle, contains
권장 상황	클래스 전체를 설정하거나 읽어야 할 때	클래스 개별 조작이 필요하거나 상태를 관리할 때

 

---

4. 실제 사용 권장

• className: 클래스 전체를 덮어쓰거나 초기화해야 하는 간단한 경우에 사용.
• classList: 동적으로 클래스를 추가, 제거, 상태를 관리해야 하는 경우에 사용.

대부분의 현대 브라우저 환경에서는 classList가 더 강력하고 유연하므로 일반적으로 더 선호됩니다.