#2-7 DOM If else Function practice part Two

classList.메서드

title.classList.add / remove를 사용하면 좀더 쉽게 if - else구문에서 클래스를 추가/제거하는것이 용이하다.

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

funciton handleClick() {
	const hasclass = title.classList.contains(CLICKED_CLASS);
	if (!hassClass) { //!는 반대구문 hasclass를 가지고있지않다면,
    	title.classList.add(CLICKED_CLASS);
    } else {
    	title.classList.remove(CLICKED_CLASS);
    }
 }
 funntion init() {
 	title.addEventListener("click", handleClick);
 }
 init();

이 경우는 classList.add / remove / contains 등의 메서드를 사용하였는데, 일단 clicked라는 class를 css에서 꾸며준 다음, 따로 선언은 하지않고, CLICKED_CLASS가 clicked와 같은 상태라고 선언하였다. 그 후 hasclass는 "타이틀이 클릭된 상태"에 대입시켜서, 만약 클릭된상태가 ! 아니라면 ! CLICKED_CLASS를 추가하고, 아니라면(클릭된 상태라면)CLICKED_CLASS를 제거하라. 라는 식으로 조건문을 사용하였다.

 

toggle ***** 

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

//여태까지의 if else구문을 toggle 한문장으로 정리 가능하다..!
funciton handleClick() {
	title.classList.toggle(CLICKED_CLASS)
 }
 funntion init() {
 	title.addEventListener("click", handleClick);
 }
 init();

여태까지 if else 블라블라 적었던것을 토글 하나만 사용한다면 class를 쉽게 add/remove할 수있다.