[Javascript] classList 메서드 종류 (remove, add, item, toggle, contains, replace)

Element.classList

classList의 다양한 메서드를 통해 클래스를 간편하게 제어할 수 있다.

 

classList 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.

 

메서드

먼저 foo 클래스를 가지는 div 상수를 만들고 시작한다.

const div = document.createElement('div');
div.className = 'foo';

console.log(div) 
// <div class="foo"></div>

 

1. remove()

지정한 클래스 값을 제거한다.

존재하지 않는 클래스를 제거해도 에러를 발생시키지 않는다.

div.classList.remove("foo"); 
// <div class=""></div>

 

2. add()

지정한 클래스 값을 추가한다.

추가하려는 클래스가 이미 존재한다면 무시한다.

div.classList.add("anotherclass"); 
// <div class="anotherclass"></div>

 

여러 클래스 처리

div.classList.add("foo", "bar", "baz"); 
// <div class="anotherclass foo bar baz"></div>

div.classList.remove("foo", "bar", "baz"); 
// <div class="anotherclass"></div>

 

3. item(index)

인덱스를 이용하여 클래스 값을 반환한다.

console.log(div.classList.item(0)) // anotherclass

 

4. toggle()

• 인수가 하나일 때
  
  클래스가 존재한다면 제거하고 false를 반환, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

div.classList.toggle("visible"); // <div class="anotherclass visible"></div>

 

• 인수가 두 개일 때
  
  두 번째 인수가 true면 클래스 값을 추가하고 false면 제거한다. 생각보다 유용하게 사용된다.

div.classList.toggle("visible", i < 10 );

 

5. contains()

지정한 클래스 값이 엘리먼트의 class속성에 존재하는지 확인하여 참, 거짓을 반환한다.

// <div class="anotherclass visible"></div>

console.log(div.classList.contains("foo")); // false
console.log(div.classList.contains("visible")); // true

 

6. replace(old, new)

기존의 클래스를 새로운 클래스로 교체한다.

// <div class="anotherclass visible"></div>

div.classList.replace("visible", "hidden"); 
// <div class="anotherclass hidden"></div>

 

참조

• developer.mozilla.org/ko/docs/Web/API/Element/classList