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
      • 기타
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

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

  • 최근 글

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

티스토리툴바