classList란?

html의 object가 가지는 모든 class를 리스트라는 구조로 용이하게 확인/제어 하기 위해 존재하는 class의 List이다.

예를 들어

HTML스크립트에서 h1태그 내에 class="good-font"로 하나의 클래스가 기존에 할당 되어있는 상태에서

javascript 내에서 h1태그를 가져와 조작한다고 할 때, className = "otherClass"를 적용한다면 기존에 html내에서 할당했던 클래스는 사라지고, JS에서 부여한 class만이 남게 될 것이다.

다시말해, className에 새로운 값을 할당하는 class제어 방식으로는 하나의 HTML ELEMENT에 할당된 여러 class를 효율적으로 제어할 수 없음을 의미한다.
(물론 하나의 변수를 선언하여 그 안에 "className1 className2" 를 입력하면 제어를 할 수는 있으나, 매우 번거롭고 비효율적인 작업을 초래한다.)

하지만 classList와 classList에서 사용할 수 있는 여러 Method를 활용한다면 기존 h1에 할당된 "good-font" 클래스를 해치지 않고 otherClass를 추가/제거./확인 등을 수행 할 수 있다.

Best Case EX

// h1이 가진 클래스들에 otherClass라는 클래스가 있는지 확인
h1.classList.contains(otherClass); 

// h1가 보유한 클래스리스트에서 otherClass를 제거
h1.classList.remove(otherClass); 

//h1의 classList에 otherClass라는 class를 추가
h1.classList.add(otherClass); 

위의 classList & add 메소드를 이용하면 기존의 h1 클래스들을 무결하게 지킬 수 있는 반면,

Worst Case EX

alter h1.classList.add(otherClass) to the WAY USING className)

h1.className = "otherClass";

이와 같이 className을 사용하면 html에서 할당했던 good-font class 외 모든 기존의 클래스는 사라지고 otherClass 하나만 남게 되므로 매우 치명적인 버그를 유발한다.

• classList는 자신만의 다양한 Method를 가지며 이를 활용하여 하나의 element가 가지는 여러 개별 class들을 독립적으로, 무결하게 제어할 수 있다.

• 메소드 등은 MDN의 DomTokenList 문서에서 확인 가능하다.

  https://developer.mozilla.org/ko/docs/Web/API/DOMTokenList