DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.
<script src="myScriptFile.js"></script>
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다.
이 <script> 요소를 추가하는 두 가지 대표적인 사례가 존재합니다. 하나는 <head> 요소에 추가하는 방법, 다른 하나는 </body>가 끝나기 전에 추가하는 방법입니다. 두 사례를 비교해 보고 차이점은 무엇인지 알아봅시다
<head> 안쪽에 삽입하는 경우
<body> 요소가 끝나기 전에 삽입하는 경우
두 방식 모두 myScriptFile.js 내의 첫 번째 console.log를 성공적으로 출력하지만,
두 번째 console.log의 경우 제대로 출력하지 못하는 예시가 있습니다.
// myScriptFile.js 파일
console.log('welcome JavaScript');
let msgElement = document.querySelector('#msg');
console.log(msgElement);