개발/Javascript

defer 전체 HTML문서를 전부 읽은 후 자바스크립트를 동작시키고 싶다

umilove98 2022. 10. 10. 23:28
반응형

다음과 같이 작성된 HTML 문서가 있다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./main.js"></script>
  </head>

  <body>
    <div class="box">hello</div>
  </body>
</html>

 

main.js 에 이런 내용을 입력해 보았다.

 

let boxEl = document.querySelector('.box');

console.log(boxEl);

querySelector를 통해 문서 내부의 box클래스를 가진 요소를 가져와 boxEl 이라는 함수 내부에 저장 후 그 내용을 콘솔에 출력하는 코드이다. 

 

해당 요소의 정보를 확인하기 위해 실행시켜보았는데..

 

 

의도한 것과 다르게 null값이 콘솔에 출력되었다.

 

기본적으로 브라우저가 HTML문서를 위에서 아래로 읽어가며 실행하기 때문에 이런 현상이 발생하게 되었는데

<script src="./main.js"></script>

자바스크립트를 불러와 동작시키는 해당 코드는 문서의 윗 부분인 head 부분에 작성되어 있고

 

<div class="box">hello</div>

자바스크립트 문서에서 찾고 있는 box클래스를 가진 해당 요소는 비교적 아랫부분인 body 태그 내부에 작성되어 있다.

 

이러한 문제에서 의도대로 해당 요소의 생성이 끝난 후 자바스크립트를 동작시키기 위해서 defer 라는 속성을 활용하게 된다.

 

<script defer src="./main.js"></script>

script 태그 안에 defer 속성을 적용해주고 다시 한 번 실행해보니 

 

처음 의도한 대로 원하는 결과가 콘솔에 출력된 것을 확인할 수 있다.

반응형