DOM (Document Object Model)
프로그래머 관점에서 바라 본 HTML
문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
= 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다
mdn - DOM 소개
- JavaScript를 사용할 수 있다면
DOM으로 HTML을 조작할 수 있다
HTML에 JavaScript 적용하기
<script> 태그를 이용
<script src="myScriptFile.js"></script>웹 브라우저는 HTML 파일을 위부터 차례로 해석한다
- 그 중
<script>를 만나면
웹 브라우저는 HTML 해석을 잠시 멈춤
<script>를 먼저 실행
<script>는 등장과 함께 실행
<script> 태그를 추가하는 두 가지 경우
<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><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><head> 에 <script> 가 있는 경우
<script>용량이 너무 크거나 갯수가 많을 때
해당 파일 다운로드 & 실행에 많은 시간이 소요
아직 아래 HTML 내용을 읽지도 못 했는데
<script>로 읽지 않은 HTML 내용을 조작하게 될 수 있음
=> 없는 내용은 조작할 수 없다
이를 막기 위한 <script> 태그 속성
async,defer
<script>태그는 어디에 위치해야 할까요?
항상배우기