[JS] classList 메서드

📌 Element.classList

: classList의 다양한 메서드를 통해 클래스를 간편하게 제어가 가능
classList 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형이 가능

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

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

1. remove()

: 지정한 클래스 값을 제거/ 존재하지 않는 클래스를 제거해도 에러를 발생 X

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>