umilove98의 블로그

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

language,framework,library/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 속성을 적용해주고 다시 한 번 실행해보니 

 

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

반응형

'language,framework,library > Javascript' 카테고리의 다른 글

node.js 버전을 여러가지 관리하며 사용하고 싶다. NVM  (0) 2022.10.21
페이지 맨 위로 스크롤 하고 싶다 ScrollToPlugin  (0) 2022.10.21
gsap 자바스크립트로 애니메이션 효과 적용하기  (0) 2022.10.13
window.scrollY 화면의 스크롤 위치를 이용하여 이벤트 처리하기  (0) 2022.10.13
lodash.js 이벤트 발생 시 함수 실행 빈도를 조절해보자  (0) 2022.10.12
'language,framework,library/Javascript' Related Articles more