2023.08.26 (vanilaJS필기 정리)

const h1 = document.querySelector('div.hello:first-child h1')
console.log(h1)
console.dir(h1)

function handleH1Click() {
  const clickName = 'clicked'
  // 이렇게 하면 최초 설정한 sexy-font가 사라진다.
  //   if (h1.className === 'clicked') {
  //     h1.className = ''
  //   } else {
  //     h1.className = 'clicked'
  //   }

  //*classList : 클래스들을 추가 제거할 수있는 배열과 비슷
  // classList.contains(), classList.add() classList.remove()등이 있다.
  //   if (h1.classList.contains(clickName)) {
  //     h1.classList.remove(clickName)
  //   } else {
  //     h1.classList.add(clickName)
  //   }

  // classList와 동일한 기능을 사용하는 toggle.
  h1.classList.toggle(clickName)
}

h1.addEventListener('click', handleH1Click)