- 코드 깔끔하게 정리하기 : raw string을 변수에 저장하기
classList: 우리가 class를 목록으로 작업할수 있게끔 허용해준다.
className은 이전calss를 상관하지 않고 모든걸 교체해 버린다. 그래서 버그가 일어날 수 있다.
classList를 이용하는건 element의 class 내용물을 조작하는 것을 허용한다는 뜻- contains 라는 함수 : 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.
- remove 라는 함수 : 명시한 class name을 제거
- add 라는 함수 : 명시한 class name을 추가
- 위 모든걸 아우르는
toggle은 토큰이 존재하면 토큰제거, 토큰존재 하지않으면 추가한다.
ex) toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약 있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 classname 추가
const h1 = document.querySelector(".hello h1");
function handleTitleClick() {
const activeClass = "active";
if (h1.classList.contains(activeClass)) {
h1.classList.remove(activeClass);
} else {
h1.classList.add(activeClass);
}
}
함수는
function handleTitleClick() {
h1.classList.toggle("active")
}
와 같다.
h1.addEventListener("click", handleTitleClick);
