ClassList 총정리 (className과 비교)

 

 

 

ClassList는 이전 글에서도 종종 언급하고

실제로도 자주 사용하는 속성이다.

여러 메서드 중, classList.toggle에 대해서만 정리를 한적이 있다.

토글 버튼 구현하기 (+ 'X'자 버튼 만들기)

 

 

 

이번에는 다른 메서드도 알아보자.

 

 

 

1. add()

하나 이상의 클래스를 추가하는 메서드이다.

 

const box = document.querySelector('.box')

// 1개의 class추가
box.classList.add("class1")
// 1개 이상의 class추가
box.classList.add("class1","class2")

 

2. remove()

하나 이상의 클래스를 제거하는 메서드이다.

 

const box = document.querySelector('.box')

// 1개의 class삭제
box.classList.remove("class1")
// 1개 이상의 class삭제
box.classList.remove("class1","class2")

 

3. contains()

해당 클래스의 존재여부를 확인하는 메서드이다.

 

const box = document.querySelector('.box')

console.log(box.classList.contains("class"));

 

4. replace()

존재하는 클래스를 다른 클래스로 교체하는 메서드이다.

 

const box = document.querySelector('.box')

box.classList.replace("oldClass","newClass");

 

*className

자주 classList와 함께 언급되는 속성이다.

classList와 달리 class의 이름 변경 한다.

 

const box = document.querySelector('.box')

box.className("wrap");
// 실행 전 <div class="box"></div>
// 실행 후 <div class="wrap"></div>

 

 

만약 class가 여러개일 경우, 모든 클래스를 제거한다.

 

const box = document.querySelector('.box')

box.className("wrap");
// 실행 전 <div class="box box-wrap active"></div>
// 실행 후 <div class="wrap"></div>

 

따라서 만약 기존 클래스를 모두 제거하고

새로운 클래스를 추가 하고싶다면 className.add 사용을 추천한다.