아래는 자바스크립트 코드.
console.log('welcome JavaScript')
let msgElement = document.querySelector('#container');
console.log(msgElement);
개발자 모드에서 콘솔창을 보면 아래 두 결과는 다르다.
head태그 안에 넣은 것은 #container를 찾지 못하고 null을 반환함.
그 이유는
브라우저가 html 코드를 위에서부터 차례대로 해석하다가 script 태그를 중간에 javascript 파일을 불러와서 실행하기 때문이다.
따라서 모든 html 태그를 읽고 script를 실행할 수 있도록 body 태그 끝나기 직전에 넣자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<h2>Tweet List</h2>
<div class="tweet">hello</div>
<div class="tweet">world</div>
<div class="tweet">code</div>
<div class="tweet">states</div>
</div>
</body>
<script src="script.js"></script>
<script src="myscriptfile.js"></script> <!-- 여기 넣는 것-->
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<script src="myscriptfile.js"></script> <!-- 여기 넣는 것-->
</head>
<body>
<div id="container">
<h2>Tweet List</h2>
<div class="tweet">hello</div>
<div class="tweet">world</div>
<div class="tweet">code</div>
<div class="tweet">states</div>
</div>
</body>
<script src="script.js"></script>
</html>'길 > DOM' 카테고리의 다른 글
| DOM으로 작동하는 웹앱 만들기 (0) | 2021.02.04 |
|---|---|
| DOM 기초 (0) | 2021.02.04 |
| DOM vs. HTML (0) | 2021.02.03 |