class들의 목록으로 작업할 수 있게 허용해준다.
className은 이전의 class들을 상관하지 않고 모든걸 교체해버린다.
그러나 classList는 조금 다르다.
classList에는 여러 가지 function들이 있다.
예를 들어, contains! 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.
function handleTitleClick() {
const clickedClass = "clicked";
if (h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
classList.contains는 HTML element가 가지고 있는 또 하나의 요소를 사용하는 것이다.
그러나 className이 바뀌기 때문에 remove으로 제거해준다.
만약에 clickedClass
가 h1
의 classList
에 포함되어 있다면h1.classList.remove(clickedClass)
을 작성해서 제거해준다.
만약에 clicked
가 h1
의 classList
에 포함되어 있지 않다면, h1.classList.add(clickedClass);
를 작성해서 추가해준다.
toggle function은
class name
이 존재하는지 확인해서
class name
이 존재한다면 toggle은class name
을 제거하고,class name
이 존재하지 않는다면 toggle은class name
을 추가할 것이다.
한 마디로, toggle은
if (h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
위 코드를 아주 짧게 구현 하는 것이다.
h1.classList.toggel(clickedClass);