[Javascript] 요소의 클래스 다루기

0. 클래스 추가

클래스의 추가는 요소.classList.add('클래스명') 으로 할 수 있다.

 

let target = document.querySelector('#target');
target.classList.add('active');

 

 

1. 클래스 삭제

클래스의 삭제는 요소.classList.remove('클래스명') 으로 할 수 있다.

let target = document.querySelector('#target');
target.classList.remove('active');

 

 

2. 클래스 토글

클래스의 토글은 요소에 특정 클래스가 존재하면 삭제하고 존재하지 않는다면 추가한다. 요소.classList.toggle('클래스명') 으로 할 수 있다.

let target = document.querySelector('#target');
target.classList.toggle('active');

 

 

3. 클래스 변경

클래스의 수정은 기존의 클래스를 다른 클래스로 변경한다. 요소.classList.replace('기존 클래스명', '새 클래스명') 으로 할 수 있다.

let target = document.querySelector('#target');
target.classList.replace('active', 'deactive');

 

 

4. 클래스 포함 확인

특정 클래스가 해당 요소에 포함되어있는지 확인한다. 요소.classList.contains('클래스명') 으로 할 수 있으며 반환 타입은 boolean 이다.

let target = document.querySelector('#target');
target.classList.contains('active');

 

 

* classList

classList를 사용해 해당 요소의 Class들을 DomTokenList라는 유사배열 객체로 받아볼 수 있다.