[JavaScript] 클래스 제어 classList()

classList()

엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.

classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

01. Element.classList.add() 클래스 추가

Element.classList.add('클래스명') // 클래스 하나 추가
Element.classList.add('클래스명a', '클래스명b', '클래스명c',) // 클래스 여러개 추가

02. Element.classList.remove() 클래스 제거

Element.classList.remove('클래스명') //제거

03. Element.classList.replace() 클래스 변경

Element.classList.replace('지금클래스명' , '바꿀 클래스명') //클래스명 변경

04. Element.classList.toggle() 토글이벤트

클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가한다.

Element.classList.toggle( '클래스명') // 클릭 시 클래스 제거, 생성 반복

05. Element.contains() 클래스 확인

해당 엘리먼트 위치에 클래스가 존재하는지 확인 한다.

Element.classList.contains( '클래스명') // 클래스 있는지 확인