[자바스크립트 스터디]Review - classList

classList란

Element.classList : 읽기 전용 프로퍼티!
공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

메서드

• classList.add(String) : 지정한 클래스 값을 추가. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

• classList.remove(String) : 지정한 클래스 값을 제거
  ! 존재하지 않는 클래스를 제거하는 것은 에러를 발생하지 않는다.

• classList.contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

• classList.replace(oldClass, newClass) : 존재하는 클래스를 새로운 클래스로 교체

연습하기

const title = document.getElementById("title");
const CLICKED_CLASS = "clicked";

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

};

function init(){
    title.addEventListener("click", handleClick);
};

init();

위 코드의 문제점은! h1의 class는 "clicked" 하나만 쓸 수 있고, 다른 class를 쓸 수 없다는 것!

그래서 contains, toggle로 해결방법 코드!

• classList.contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if(hasClass){
        title.classList.remove(CLICKED_CLASS);
    }else{
        title.classList.add(CLICKED_CLASS);
    };

};

function init(){
    title.addEventListener("click", handleClick);
};

init();

• toggle 메서드를 사용하면 더 간결한 코드를 짤 수 있다.

function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
};

'CLICKED_CLASS'라는 class가 있으면 add, 없으면 remove!

참고한 곳 : MDN web docs