Achievement Goals
- DOM의 개념을 이해할 수 있다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
- HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.
- script 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.
Advanced Challenge
- DOM과 JavaScript의 차이에 대해 이해할 수 있다.
(1)DOM은 무엇입니까??
- DOM은 Document(HTML문서) Object(객체) Model(모델)의 약자로,
JavaScript를 사용해서, DOM으로 HTML을 조작할 수 있습니다. - Html을 조작할 수 있도록 마련된 객체 형태의 구조,모델
- DOM과 같이 잘 만들어진 규칙이 없으면, javascript언어로 접근하기가 쉽지 않다.
- DOM은 각기 브라우저로 다르게 규현되어 있다. 다만 메이저 브라우저에서는 최대한 DOM SPEC에 맞게 구현하려고 노력하기 때문에, 웹개발자는 javascript로 DOM 사용에 집중해야한다.
- DOM이 없다면 HTML을 일일히 바꿔야만 했을걸, 이는 처음에는 괜찮지만 프로덕션급 대규모 프로젝트에는 부적합하다.
(2)HTML에 JavaScript 적용하기
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다.
HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다. <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요.
이 <script> 태그를 추가하는 두 가지 대표적인 사례가 존재합니다.
하나는 <head> 태그에 추가하는 방법, 다른 하나는 </body> 가 끝나기 전에 추가하는 방법입니다. (2-1)<head> 안쪽에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>(2-2)<body> 태그가 끝나기 전에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>두 방식의 공통점과 차이점
두 방식 모두 myScriptFile.js 내의 첫 번째 console.log를 성공적으로 출력하지만,
두번째 의 경우 제대로 출력하지 못하는 예시가 있습니다.
console.log('welcome JavaScript');
let msgElement = document.querySelector('#msg');
console.log(msgElement);<head> 안쪽에 삽입하는 경우
<body> 태그가 끝나기 전에 삽입하는 경우
null이 나오는 이유
head에 script를 통해 자바스크립트를 수행한다면 body태그는 아직 파싱되기 전이기 때문에 자바스크립트에서 해당 태그가 무엇인지 알 수 없습니다. (null을 가지고 작업하게 됩니다)
이로인해 HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생합니다.
body 태그 최하단이 가장 좋은 이유
HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 가장 좋습니다.
출처: 코드스테이츠
끝까지 ... 가면 된다.