[JavaScript] className과 classList

js 실습을 진행하던 중 className과 classList의 차이점에 의문이 생겨 정리해보려한다.

✨ className

• Element 인터페이스의 className 속성은 지정된 요소의 클래스 속성 값을 가져오고 설정한다.

• 현재 요소의 클래스 또는 공백으로 구분된 클래스를 나타내는 문자열 변수이다.

• DOM을 조작하는 데 사용되는 여러 언어의 "class" 키워드와 충돌하기 때문에 클래스 대신 className이라는 이름이 이 속성에 사용된다.
  
  

• 예시

  const el = document.getElementById("item");
  el.className = el.className === "active" ? "inactive" : "active";

✨ classList

• Element.classList는 요소의 클래스 특성에 대한 실시간 DOMTokenList 컬렉션을 반환하는 읽기 전용 속성이다.

• classList를 사용하면 element.className을 통해 요소의 클래스 목록에 공백으로 구분된 문자열로 액세스할 수 있다.

• classList 속성 자체는 읽기 전용이지만 .add(), .remove(), .replace(), .toggle() 등 메서드를 사용하여 클래스 목록을 조작할 수 있다.
  
  

• 예시

  const div = document.createElement("div");
   div.className = "foo";
   div.classList.remove("foo");	
   div.classList.add("anotherclass");
  
   div.classList.toggle("visible");
   div.classList.toggle("visible", i < 10);
  
   console.log(div.classList.contains("foo")); // 존재하는지
  
   // 여러 클래스들 추가 및 제거
   div.classList.add("foo", "bar", "baz");
   div.classList.remove("foo", "bar", "baz");
  
   // spread 문법 사용하여 여러 클래스들 추가 및 제거
   const cls = ["foo", "bar"];
   div.classList.add(...cls);
   div.classList.remove(...cls);
  
   // "foo" 클래스를 "bar" 클래스로 대체
   div.classList.replace("foo", "bar");

✔ className과 classList 비교 예시

class 이름 읽기

<div id='ex' class='foo bar'></div>

// className
print(document.getElementById('ex').className); // foo bar

// classList
print(document.getElementById('ex').classList); // foo bar

class 이름 설정 및 추가

<div id='ex'></div>

// className
document.getElementById('ex').className = 'foo';    // 이름 설정
document.getElementById('ex').className += ' bar';  // 이름 추가

// classList
// classList는 read-only 속성이라 직접 값을 지정할 수 없음
document.getElementById('ex').className = 'foo';    // 이름 설정
document.getElementById('ex').classList.add('bar'); // 이름 추가

참고 자료

classList 공식 문서
className 공식 문서