title - 1

title - 2

"> 08-01_dom-basic
title - 1

title - 2

"> 08-01_dom-basic
title - 1

title - 2

Untitled
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-01_dom-basic</title>
<script type="text/javascript">
	/*
		# DOM( Document Object Model)
		- 웹페이지에 작성된 HTML 태그를 객체화.
		
		# DOM 객체
		- HTML 태그당 하나의 DOM 객체가 생성.
		- DOM 노드(node), DOM 요소(element)
	
		# 브라우저 실행 순서( DOM )
		- HTML 문서를 파싱해서 DOM tree 생성
		  이미지를 포함한 요소 로드
		  페이지 로딩 완료
		  
		# querySelector()
		- html 문서에서 선택한 클래스 이름, 태그와 일치.
	*/
	alert('Process - 0');
</script>
</head>
<body>
	<h1>title - 1</h1>
	<script type="text/javascript">alert('Process - 2');</script>
	
	<h2>title - 2</h2>
	<script type="text/javascript">alert('Process - 3');</script>
	<script type="text/javascript">
		document.querySelector('h1').style.backgroundColor='red';
		document.querySelector('h2').style.colr='blue';
	</script>
</body>
</html>