[JavaScript] classList 프로퍼티

classList

DOM을 조작하여 클래스를 추가하거나 삭제할 때, class 명을 바꿀 때 등 다양한 상황에 사용할 수 있는 classList 프로퍼티.
챌린지를 진행하다 classList 프로퍼티 중 극히 일부의 메서드만 사용하고 있었다는 것을 깨달았다.
상황에 따라 코드를 더 깔끔하게 짤 수 있는 메서드도 있고 해서, 전체적으로 어떤 메서드가 있는지 한번 훑어보려 한다.

 

 

add, remove

평소 사용했던 일부의 메서드.. 가장 간편해서 그런지 기억에 오래 남아있는 것인가 싶기도 하다. 🤔

아래와 같이 간단한 예시를 들 수 있다.
메소드 이름대로, 클래스를 추가하고 제거하는 메서드다. 여러 개를 나열할 수도 있다.

 let li = document.createElement('li');
 li.classList.add('user-item');
 li.classList.remove('active');

 

toggle

DOM 조작을 하면서 활성화 되었을 때만 추가되는 클래스가 있다던가 하는 경우에는 toggle을 통해 클래스의 추가 삭제를 제어할 수 있다.

function openToggle() {
  this.classList.toggle('is-active');
}

 

 

contain

매개변수의 값이 클래스 중에 존재하는지 확인할 수 있다. true 혹은 false로 값을 반환한다.
클래스가 없다면 추가하거나 클래스가 없다면 삭제하는 경우에 유용하게 쓰일 것 같다.

const div = document.createElement('div');
console.log(div.classList.contains('text'));

 

items

콜렉션의 인덱스를 이용해서 인덱스에 해당하는 클래스 값을 반환한다.

See the Pen classList1 by YJ LEE (@yujleee) on CodePen.

 

 

 

replace

기존 클래스를 새로운 클래스로 교체한다.
같은 기능을 하지만 값에 따라 스타일이 다른 경우에 유용할 것 같다.

See the Pen classList2 by YJ LEE (@yujleee) on CodePen.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Element/classList