Today I Learned #2

Javascript로 로직 처리하기 - element.classList()

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

querySelector를 통하여 id="title"인 element를 title로서 선언해줍니다.

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

이 방식으로 click에 대한 event를 처리하는 경우, 기존 title의 className이 ""이 아닌 경우 (ex) btn) click이 발생하면 btn이 clicked로 바뀌게 되고 다시 click이 발생하면 className이 btn이 아닌 ""로 바뀌게 된다.
btn의 특성도 유지하고, click 여부를 반영하고 다시 클릭한 경우 원래의 상태로 돌아가게 하고자 한다면 어떻게 해야할까?

MDN element.classList의 메서드를 참고하면, element.classList.contains(string)을 통해 해당 element의 class중에 string에 해당하는 속성이 존재하는지 여부를 확인 할 수 있고, element.classList.add(string)을 통해 기존의 class에 해당 string을 추가할 수 있고, 이미 있는 경우 무시한다고 한다. element.classList.remove(string)은 같은 방식으로 string으로서 지정된 클래스 값을 제거한다고 한다. 해당 내용을 참고한 코드는 아래와 같다.

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

이렇게 코드를 작성하고 실행하면, hasClass를 이용하여 title의 class에 "clicked"가 포함되는지 여부를 contains를 통해 확인하고, 기존의 class="btn"이었던 경우 click이 발생하면 class="btn clicked"로 추가가 되며, btn의 특성은 그대로 유지된다. click이 한번 더 발생하면, class="btn"으로 수정되며 처음의 형태로 돌아가게 된다.

앞선 MDN 문서의 메서드를 읽다보면, add(), remove()와 같이 toggle()이라는 메서드가 존재하는데, 해당 메서드를 사용하여 코드를 아래와 같이 작성하면, 위의 코드와 정확히 같은 로직으로 작동하지만 훨씬 더 깔끔하고 짧은 코드를 사용할 수 있음을 알 수 있다.

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

이처럼, MDN에는 없는 것이 없다.
역설적으로 없는 것이 없어서 정확하게 원하는 것을 찾는 시간이 오래 걸릴 뿐,,