반응형
<!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값이 반환된다.
웹 브라우저는 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>
defer는 HTML 문서를 모두 읽은 후에 script 파일을 읽도록 지시한다.
반응형
'Development > javascript' 카테고리의 다른 글
| callback으로 받은 값 사용하는 법 (0) | 2022.11.30 |
|---|---|
| 메소드 체이닝 (0) | 2022.11.30 |
| 보간법 (0) | 2022.11.29 |