196. classList

class 추가, 삭제, 변경

className : 문자열로 가져옴

classList : 배열로 가져옴

className

• 특정요소의 클래스 값을 문자형태로 가져온다.
  (실수로라도) 해당 요소에 클래스 사이에 빈칸들이 있으면 split("")로 분리시킬 때 방 번호 잡기 힘들다.

요소.className

classList

• 배열로 받아온다.
  클래스가 하나만 있어도 0번방
  (읽기 전용 프로퍼티)

요소.classList

1. 확인

	[보기] let 변수 = document.getElementById('아이디값');
	
	console.log(변수);
	출력 : <div class="클래스명 클래스명 클래스명"id="아이디값">txt</div>

    console.log(변수.className); 
	출력 : " 클래스명 클래스명 클래스명"

    console.log(변수.classList); 
	출력 : 배열형태로 ['클래스명', '클래스명', '클래스명']

2. 추가

-한개만 추가-

	요소.classList.add('클래스명')
	요소.classList+='클래스명'

-여러개 추가-

	요소.classList.add('클래스명', '클래스명',...)
	요소.classList+='클래스명 클래스명...'

3. 수정

	요소.classlist.replace("없앨 문자열", "삽입할 문자열")

4. 삭제

	요소.classlist.remove('클래스')
	요소.classList.remove('클래스', '클래스'.'클래스',...)
	요소.className = ""; // => (전부 다 삭제할 경우)

5. toggle

	요소.classList.toggle('클래스명');
	요소.classList.toggle('클래스명');

	해당 요소에 클래스가 있으면 삭제
	없으면 넣어줌

6. contain

	해당 요소에 클래스가 있는 지 확인
	있으면 true, 없으면 false

	요소.classList.contain('클래스명');
	출력 : true or false