defer

2022. 11. 29. 13:27·Development/javascript
반응형
 

 

<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./js/main.js"></script>
</head>
<body>
    <div class="div">div element</div>
</body>
</html>
const divElem = document.querySelector('.div');
console.log('querySelector result: ', divElem);

위와 같이 작성할 경우, 다음과 같이 null값이 반환된다.

result of querySelector

웹 브라우저는 HTML의 맨 위에서부터 아래로 순차적으로 문서를 읽어나간다. 이 때, script 요소를 읽은 시점은 body 요소를 읽기 전인데, 스크립트문에 의해 알 수 없는 요소에 대한 querySelector를 실행하고 있는 셈이 된다. 따라서 null이 반환된다.

이를 해결하기 위해선 script 요소에 defer 속성을 추가해주어야 한다.

<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="./css/main.css" />
    <script defer src="./js/main.js"></script>
</head>
<body>
    <div class="div">div element</div>
</body>
</html>

result of querySelector

defer는 HTML 문서를 모두 읽은 후에 script 파일을 읽도록 지시한다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'Development > javascript' 카테고리의 다른 글

callback으로 받은 값 사용하는 법  (0) 2022.11.30
메소드 체이닝  (0) 2022.11.30
보간법  (0) 2022.11.29
'Development/javascript' 카테고리의 다른 글
  • callback으로 받은 값 사용하는 법
  • 메소드 체이닝
  • 보간법
doh.k
doh.k
  • doh.k
    DOHk's DevLog
    doh.k
  • 전체
    오늘
    어제
    • 분류 전체보기
      • DailyLog
      • TIL
      • Project
        • Development
        • Artificial Intelligence
      • Development
        • Database
        • WEB
        • CSE
        • javascript
        • Algorithms
        • Linux
        • Network
        • Python
        • 라즈베리파이
        • Apple
      • Research
        • 논문
        • 금융,블록체인
        • Time-Series
        • 수학
        • 미적분학
        • 화학
      • Artificial Intelligence
        • Machine Learning
        • Deep Learning
        • TensorFlow
        • ReinforcementLearning
      • 기타
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바스크립트
    Spring
    가상화폐
    스프링
    맥북
    JavaScript
    Linux
    gradient
    Algorithms
    ssh
    데이터
    네트워크
    딥러닝
    리눅스
    알고리즘
    기계학습
    자료구조
    gradient descent
    머신러닝
    라즈베리파이
    데이터베이스
    Python
    Mac
    파이썬
    Machine Learning
    경사하강법
    Network
    블록체인
    pycharm
    아이패드
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
doh.k
defer
상단으로

티스토리툴바