[책] 자바스크립트 코드 레시피 278 - 102일차

페이지 로드 시 이벤트 사용하기

• DOM 요소 액세스 타이밍에 맞춰 작업을 처리하고 싶을 때
• 이미지 로딩이 완료된 후 작업을 처리하고 싶을 때

구문

DOMContentLoaded HTML 문서 로딩 완료 시점
load 모든 리소스 로딩 완료 시점

설명

자바스크립트에서 DOM 요소의 조작 가능 시점은 HTML 문서의 로딩 완료 시점으로 이 시점에서 DOMContentLoaded 이벤트가 발생합니다. 페이지 내 .box 요소의 개수를 세는 샘플을 확인해 봅니다. 다른 샘플과 달리 script 태그에 defer 속성을 부여하지 않습니다. document.querySelectorAll()은 셀렉터와 일치하는 모든 요소를 가져오며, .length는 요소의 개수를 추출합니다. 로그에서 .box 요소의 개수가 출력됩니다.

index.html

<main class="main">
  <div class="box">박스</div>
  <div class="box">박스</div>
  <div class="box">박스</div>
</main>

---

script.js

window.addEventListener('DOMContentLoaded', () => {
  // .box 요소 개수 가져오기
  const boxNum = document.querySelectorAll('.box').length;

  // 로그 출력
  console.log(`.box 요소의 개수는 ${boxNum}개 입니다.`);
});

이벤트 설정 DOMContentLoaded 하지 않으면?

window.addEventListener('DOMContentLoaded', () => {}) 를 사용하지 않는 경우를 확인 해봅니다. HTML의 head 태그 안에 script 태그가 존재하는 경우 .box 요소의 로딩보다 자바스크립트가 먼저 실행되어 버리므로 document.querySelectorAll('.box') 를 사용해도 .box 를 가져올 수 없게 됩니다. 그러므로 로그의 결과는 0이 출력됩니다. 한번 개발자 모드 열어서 콘솔에서 확인해봅니다.

const boxNum = document.querySelectorAll('.box').length;
console.log(`.box 요소의 개수는 ${boxNum}개 입니다.`); // 0개

load 이벤트는 페이지 내 모든 리소스(사진, 사운드, 동영상 등)의 로딩이 완료된 후 발생합니다. 그러므로 DOMContentLoaded보다 시점이 느립니다. 페이지가 표시되는 시점에 요소를 조작하고 싶다면 일반적으로 DOMContentLoaded를 사용합니다.

이벤트 설정 DOMContentLoaded 하지 않고 실행하기

script 태그에 defer 속성을 설정하면 HTML 로딩 후 스크립트가 실행됩니다. 이는 DOMContentLoaded보다는 발생 시점이 앞섭니다. 따라서 defer 속성을 설정하면 DOMContentLoaded의 이벤트 설정은 필요가 없습니다.

index.html

<!-- HTML head 태그 script defer 설정하면 실행됩니다. -->
<script src="100_chapter.js" defer></script>

---

script.js

const boxNum = document.querySelectorAll('.box').length;
console.log(boxNum);
console.log(`.box 요소의 개수는 ${boxNum}개 입니다.`);