JS classList

저번 글에서 html class에 대해 정리했었는데, js 코드를 이용해 이를 제어할 수 있다.

Element.classList는 엘리먼트의 클래스 목록을 반환하는 읽기 전용 프로퍼티다. 그러나 add(), remove() 등의 메서드를 통해 클래스 목록을 제어할 수 있다.

 

다음은 classList의 메서드들이다.

 

classList.add( class1, class2, ... ) 

엘리먼트에 클래스 이름 추가

이미 있는 클래스를 추가하고자 하는 경우 추가되지 않는다.

여러 클래스를 동시에 추가할 수 있다.

 

classList.remove( class1, class2, ... )

엘리먼트에서 클래스 제거

존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않는다(null 반환).

여러 클래스를 동시에 제거할 수 있다.

 

classList.toggle( class )

엘리먼트에 해당 클래스가 있는지 체크한 후, 있으면 제거하고 없으면 추가한다.

 

classList.contains( class )

엘리먼트에 해당 클래스가 있는지를 나타내는 boolean 값을 반환

 

classList.item( index )

인덱스 번호로 클래스 이름 반환

 

classList.replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 교체

---

element.classList를 사용하지 않는 경우 element.className을 통해 엘리먼트의 클래스 목록에 접근해야 한다. className은 공백으로 구분된 문자열을 반환하기 때문에 엘리먼트의 클래스가 여러개인 경우 제어가 어렵다.

 

예를 들어

const el = document.getElementById("example");
const CLICKED_CLASS = "clicked";

const handleClick = () => {
    const currentClass = el.className;
    if(currentClass !== CLICKED_CLASS){
        el.className = CLICKED_CLASS;
    }else{
        el.className = "";
    };
};

const init = () => {
    el.addEventListener("click", handleClick);
};

window.onload = () => {
  init();
};

이 코드는 example이라는 ID를 가진 엘리먼트의 클래스를 제어하는 코드다. 엘리먼트가 클릭되면 className을 clicked로 바꾸고, 클릭되지 않았다면 빈 문자열로 바꾼다. 이런 식의 방법은 클래스가 하나인 경우에만 유효하다.

클릭되었다면 clicked 클래스를 추가하고, 아니면 clicked 클래스를 제거하는 방법이 여러 클래스를 가지는 엘리먼트를 제어하기에도 편하고 더 직관적이다.