[TIL] 2022-0523

모던 자바스크립트 딥다이브 - 함수 선언문, 함수 표현식 차이

[모던 자바스크립트 딥다이브] 함수 선언문, 함수 표현식

querySelectorAll 과 classList 사용

const containerHidden = document.querySelectorAll('.hidden');

btnLogin.addEventListener('click', function (e) {
  for (let i = 0; i < containerHidden.length; i++) {
    containerHidden[i].classList.remove('hidden');
  }
}

• btnLogin을 클릭했을 때 hidden 클래스를 가진 모든 요소의 hidden 클래스를 지우려고 했다.
• 처음에는 querySelector('.hidden)을 썼더니, hidden 클래스를 가진 첫번째 요소에만 적용되었다.
• querySelectorAll('.hidden')을 했더니, 어떤 요소에도 적용되지 않았다.
• 찾아보니 querySlectorAll은 클래스에 일치하는 요소를 유사배열인 NodeList로 반환한다.
• 따라서 각 요소에 접근하기 위해서는 for문이든 forEach든 배열을 순회하여 접근해야 한다.

---

• 내일은 CSS Grid를 공부해서 적용해볼 예정이다.
• 자바스크립트 개념 강의 및 딥다이브 서적을 꾸준히 공부하고 있다. 모르는 내용이 많아서 찾아보면서 읽다보니 1회독에 시간이 오래걸린다. 그래도 꼼꼼히 읽고 정리하면서 몰랐던 부분을 채워가는 느낌이라 좋다.
• 너무 엄청나게 먼 미래를 생각하기 보다는, 지금 할 수 있는 것에 최선을 다하고 싶다.