contains

contains는 해당 node가 자손인지 아닌지 유무를 판별하는 걸 뜻한다.

className과 classList의 차이

className : 기존에 class가 없으면 추가, 있으면 기존 것을 변경
classList : 기존에 class에 새로운 class를 추가

예제 (className일 때)

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
	const clickedClass = "clicked";
    if (h1.className === clickedClass) {
    	h1.className = "";
    } else {
    	h1.className = clickedClass;
    };
};

h1.addEventListener("click", handleTitleClick);

예제 (classList일 때 + contains까지 포함)

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
	const clickedClass = "clicked";
    if (h1.classList.contains(clickedClass)) {
    	h1.classList.remove(clickedClass);
    } else {
    	h1.classList.add(clickedClass);
    }
};

h1.addEventListener("click", handleTitleClick);

toggle

만약 className이 존재하면 toggle은 className을 제거합니다.
만약 className이 존재하지 않는다면 toggle은 className을 추가합니다.

toggle로 바꾸기 전에 예시

function handleTitleClick() {
	const clickedClass = "clicked";
    if (h1.classList.contains(clickedClass)) {
    	h1.classList.remove(clickedClass);
    } else {
    	h1.classList.add(clickedClass);
    }
};

toggle로 바꾼 예시

function handleTitleClick() {
	const clickedClass = "clicked";
    h1.classList.toggle(clickedClass);
};

toggle은 clicked를 classList에 추가를 해줍니다.
toggle이 하는 일은 불이 끄고 켜지는 스위치같은 일을 해줍니다.

"토큰을 toggle한다, 토큰이 존재하면 토큰을 제거하고 존재하지 않으면 토큰을 추가한다"
는게 공식 설명입니다.

반복문

심볼 프로퍼티 은닉

생명주기

this

대 제목은 이렇게 넣었고 내용은 하나하나씩 넣어가는 식으로 작성하도록 하겠습니다.