자바스크립트 className과 classList

class를 추가할 때 className과 classList 두가지 방법을 쓸 수 있는데
둘 사이에는 차이점이 존재한다.
className은 class 전체를, classList는 개별 class를 관리할 때 편리하다.
 
className은 class 전체가 바뀌어버리지만
classList는 노드의 클래스만을 바꾸기 때문에 add, remove, contains, toggle등의 함수를 사용할 수 있다.
 

[ className ]

1. element.className;  -> 클래스 이름 반환
2. element.className = "클래스명";  -> 클래스 적용 (이미 존재하면 중복 추가)
 
 

[ classList ]

1. element.classList;  -> 클래스 이름 반환
2. element.classList.item(index);  -> 클래스의 개별 속성 반환
3. element.classList.add('클래스명');  -> 클래스 추가
4. element.classList.remove('클래스명);   -> 클래스 제거
5. element.classList.contains('클래스명');  ->존재여부에 따라 true/false 반환
6. element.classLust.toggle('클래스명');  -> 클래스 존재하면 class 제거, 존재하지 않으면 추가
7. element.classList.replace('클래스명');