■ DOM (Document Object Model)
자바스크립트가 타 언어(C, Basic, PHP..)와 다른 점은 바로 DOM 이라 부르는 웹페이지의 구조와 관계가 있어.
DOM 이 무엇일까?
웹페이지는 아무리 복잡한 페이지여도 구조를 뜯어 보면 가장 큰 구조는 결국 다음과 같아.
<html>
<head>~</head>
<body>
</body>
</html>
이 큰 구조 에서 화면에 보이는 내용들은 <body>~</body> 안에 다양한 태그들로 구성되어 있어.
예를들면 아래 html 문서를 한 번 살펴 보자구. (편의상 body 부분만..)
<body>
<h1>홈피소개</h1>
<div id="menu">
<ul>
<li> 홈피소개 </li>
<li> 게시판 </li>
</ul>
</div>
<div id="content">
<h2> 제목 </h2>
<p> 아버지는 나귀타고 장에 가시고 <p>
</div>
</body>
다들 시작하는 태그(<h1> <div> <p>)와 닫는 태그(</h1> </div> </p>)로 구성되어 있고, 또 각 태그들은 부모 태그가 있어.
부모??
body 안에 있는 모든 태그들은 body 가 부모이고, div 안에 또 div 가 있다면 바깥 쪽에서 감싸고 있는게 부모야. 부모가 자식들을 감싸잖아.
윈도우 탐색기의 트리구조와 비슷한 개념이야.
body 바로 아래에 있는 <h1><div id="menu"><div id="content"> 들은 body 가 부모이고, 첫번째 div 안에 있는 ul 은 이것을 감싸는 <div id="menu"> 가 부모겠지?
두번째 div 안에 있는 h2, p 들은 <div id="content"> 가 부모야.
그리고 부모 밑에 같은 계층 안에 있는 태그나 내용들은 모두 그 부모에 대한 '형제'라고 불러.
그러니 <div id="menu"> 와 <div id="content">는 형제 간이 되겠지?
이러한 html 의 구조를 DOM 이라고 부르고 이 DOM 을 구성하는 각각의 요소들을 객체(Object)라고 불러.
DOM 이 영문으로 Document Object Model 의 약자이니 해석하자면 "객체 모델로 된 문서?" 라고 할까?
head 도 하나의 객체야. 그 안에 자식으로 css 와 js 를 지정하는 태그들과 각종 정보들이 있어.
그리고 자바스크립트는 궁극적으로 이 각각의 객체를 조작하는 언어야.
예를들어 위의 문서에서 h1 개체의 글자내용, 크기, 색상등을 바꿀 수 있고, 첫번째 div 객체의 크기를 변경하거나 배경색, 테두리를 바꿀 수 있고, 두번째 div 객체의 제목과 내용을 변경할 수 있어.
또 특정 객체를 안보이게 하거나, 위치를 바꿀 수도 있고... 뭐든 원하는 대로 조작할 수 있어.
자바스크립트의 가장 큰 용도가 바로 이처럼 웹페이지 안의 어떤 객체를 조작하는 거야.
그럼 이제 실전으로 가볼까?