DOM
DOM 이란 제목에서도 보다시피 Document(문서) 내의 Tag들을 어떻게 Object(물체화) 하는가에 대한 W3C 의 표준 Model 이라 할 수 있겠습니다.
DHTML
Dynamin HTML 의 약자로서 웹페이지에 어떤 동적인 효과를 주기 위한 도구로서, DHTML을 딱 뭐라고 한 마디로 표현하기는 참 애매한 구석이 있습니다. 그렇지만 가장 근접한 설명을 한다면 DHTML은 HTML, CSS, JavaScript 가 결합되어서 서로 뭉뚱그려져 있는 언어라고 할 수 있습니다.
이 페이지에서는 DOM을 이용하여 HTML Tag에 어떤 Dynamic한 효과를 줄 수 있고, 또 어떻게 그런 효과를 주는지에 대해 알아 보도록 하겠습니다. 우선 간단한 예제 부터 하나 보도록 하죠. 코드 실행기에서 실행을 시켰으면 단추 부터 클릭하지 말고 링크를 먼저 클릭해 보세요. 그런 다음 단추 클릭 후에 링크를 다시 클릭해 보시져...
입력
<html>
<head>
<title>DHTML D.O.M</title>
</head>
<body>
<a id="a_1">여기를 먼저 클릭하세요.</a>
<button onclick="document.getElementById('a_1').href='http://kr.yahoo.com/';">
링크 생기기</button>
<button onclick="document.getElementById('a_1').href=' ';window.location.reload();">
링크 없애기</button>
</body>
</html>
지금 실습을 해봐서 알겠지만 a Tag에는 href 로 걸려 있는 링크가 없습니다. 따라서 실행을 하고 나면 링크걸린 글자가 아닌 일반 글자로 보이겠죠? 하지만 단추를 클릭하는 순간 href 에는 http://kr.yahoo.com/ 이라는 링크가 들어가게 되어서 글자가 링크 글자로 바뀌고, 클릭하면 야후 페이지가 열리게 되는 겁니다.
이런 걸 바로 D.O.M 이라고 하는 거져. 이건 여러번 설명했던 사실인데 일단 페이지가 다 로드 되더라도 그 페이지에 id를 가지고 Object화 되어있는 Tag들이 Parser에 그대로 들어 있기 때문에 지시만 정확하다면 문서가 다 읽혀 져도 지정한 Object에 어떤 지시를 하게되는 겁니다. 그러면 요번에는 좀 복잡한 예제...
입력
<html>
<head>
<title> DHTML D.O.M</title>
<style type="text/css">
<!--
.sam{color:tomato;}
-->
</style>
</head>
<body id="body_1" bgcolor="#dddddd">
<div id="div_1" class="sam" style="width:100%; height:25px; background:gold;">
<b>Text</b></div>
<script type="text/javascript">
<!--
// var 로 변수 설정
var bg_color, identifier, width, height, background, styleProprty, clsName, iHTML
bg_color = body_1.bgColor // body_1의 bgcolor를 bg_color 변수에 저장 'C' 대문자 주의
identifier = div_1.id // div_1의 id Name을 identifier 변수에 저장
width = div_1.style.width // div_1의 style지정 width를 width 변수에 저장
height = div_1.style.height // div_1의 style지정 height를 height 변수에 저장
background = div_1.style.background // div_1의 style지정 배경색을 background 변수에 저장
styleProperty = div_1.style // div_1의 style Property들을 styleProperty 변수에 저장
clsName = div_1.className // div_1의 className을 clsName 변수에 저장
iHTML = div_1.innerHTML // div_1의 내용(content)를 iHTML 변수에 저장
document.write("Document's bgcolor : " + bg_color + "<br />")
document.write("id Name : " + identifier + "<br />")
document.write("width : " + width + "<br />")
document.write("height : " + height + "<br />")
document.write("background : " + background + "<br />")
document.write("styleProperty : " + styleProperty + "<br />")
document.write("className : " + clsName + "<br />")
document.write("innerHTML : " + iHTML + "<br />")
// -->
</script>
</body>
</html>
출력 결과를 보면 styleProperty 의 값은 [object] 라고만 나오져? style Property 의 경우에는 Property 이름까지 적어주지 않으면 [object] 라는 결과 값만 Return 해 주기 때문이져. 또 이건 브라우저가 Attribute들을 Object로 인식하고 있다는 뜻 이기도 하구요. 충분히 이해 했으리라고 믿지만 위의 예제 중에서 약간의 보충 설명을 하겠습니다.
<div id="div_1" class="sam" style="width:100%; height:25px;background:gold;">
중에서 굵게 표시한 부분의 명칭을 어떻게 부르냐 하는 문젠데 아래와 같이
div_1 은 div_1.id (div_1의 id Name)
style="width 은 div_1.style.width (div_1 Tag의 style Attribute 중의 width Property)
이렇게 말 할 수 있겠습니다.
CSS Scripting 에서도 설명했지만 각 id.Attribute.Value 의 순으로 사이에 Period( . )을 찍어서 구분해 줍니다. 만약에 div_1.style.width를 우리가 말 할 때의 문장으로 표현 한다면 id가 div_1인 Tag의 style Property 들 중의 width 라는 Property... 이렇게 표현이 가능하겠져. 그러니까 Period를 영어의 of 로 해석하면 되겠군요. 이 처럼 HTML Tag과 Attribute가 Object로 모듈화 되어 있기 때문에 얼마든지 Tag 과 Attribute를 Control 할 수 있는 거져. 이런 DHTML이 웹 문서를 디자인 하는 사람한테 중요한 이유는 물론 시각적인 효과를 내서 방문객의 눈길을 끌어 보겠다는 의도도 나쁘지 않지만, 문장으로 길게 설명하는 것 보다 동적인 효과를 이용하여 자기가 표현하고자 하는 내용을 단 시간에 방문자에게 알리는데 진정한 목적이 있다고 할 수 있겠습니다. DHTML... 사랑스러운 것... 아주 함축적인 언어입니다.
그럼 실험 삼아 한 가지 예제를 해 보는데, 먼저 함 생각을 해 보시져. 아래의 예제와 같이 id 를 지정한 Tag에 style attribute를 사용하지 않았을 경우 CSS Scripting으로 width나 height를 새로 지정할 수 있을지 없을지에 대해서 말입니다. 지정이 미리 안되어 있으면 어떻게 되는 건지...
입력
<html>
<head>
<title> DHTML D.O.M</title>
<body id="body_1" bgcolor="#dddddd">
<div id="div_1">Text</div>
<button onclick="document.getElementById('div_1').style.color='red';
document.getElementById('div_1').style.background='gold';">
글자색과 배경색</button>
</body>
</html>
어떻습니까. style Attirbute를 빼 놓아도 Scripting이 듣지 않습니까? 이와 같이 일단 id 를 가진 object가 되면 사용하지 않은 Attribute나 Attribute 값을 넣거나 뺄 수 있습니다. 그래서 제가 HTML이 중요하다고 HTML 메뉴와 CSS 메뉴에서 여러 번 말했던 겁니다.
