수안이의 컴퓨터 연구실

고수닷넷 - Junworks77님

Document Object Model (이하 DOM) 은 HTML이나 XML같이 정형화 되어 있는 문서를 객체화하여 개발언어(스크립트도 당연히 포함 됩니다)에서 문서를 효과적으로 조작하기 위한 하나의 모델 입니다. - 조준철

좀 정의가 어렵지요? 원래 W3C(http://www.w3c.org) 에서 발표한 정의와는 다릅니다만 본질적으로는 그렇습니다. 지난 번에 말씀드렸듯 앞으로 웹 브라우저에서 동작하는 비베 스크립트를 중심으로 다룬다고 했는데 갑자기 웬 DOM? 이라고 생각 할 수 있겠지만, 비베 스크립트로 웹 개발을 "잘" 하기 위해서는 DOM 이라는 모델을 첫번째로 이해 하고 넘어가야 합니다.

웹 개발에 DOM? 이라고 생각 하시는 분도 계실거고, 이야 DOM에 대해 감히 예기하네? 라고 생각하시는 분도 있으실거라 생각됩니다. 제 기억에 지난 몇년동안 스크립트를 공부하면서 DOM 에 대해서 심도있게 강좌하는 글을 딱히 본 것도 없고, 들어 본 기억이 없습니다. 그 만큼 저도 나름대로의 영어 해독해가며 야매(?)로 익힌거라 원 하는 의미를 제대로 전달할 수 없을 수도 있습니다. 그래서 제가 이해 한 대로 의미를 풀어가려고 합니다.

만약 처음 이 단어를 접하신 분이라면 초보든 경력자든 좀 생소해 하실 것입니다. 들어 보셨던 단어라해도 그 의미에 대해 깊게 생각하셨던 분은 드물것 같지만, 스크립트 경력 3개월 이상되시는 분이라면 누구나 사용하고 있는 개념이기도 합니다. 즉 이해하거나, 사용하기 어려운 모델이 아니라는거죠.

흔한 예기처럼 "알고 하는 거와 모르고 하는 거의 차이" 를 매우자는 의미에서 첫 정식강좌의 타이틀로 정했습니다.

웹 어플리케이션을 개발하다보면 HTML이나 XML 문서를 디자인타임이 아닌 런타임에서 만들거나, 구조를 검색하고, 내용을 추가하거나, 수정, 삭제하는등 다양한 액션을 취할 경우가 생깁니다. 결국 개발자는 DOM 모델을 이용하여 이러한 작업을 하게 되는 건데요. 순수한 DOM 모델만으로는 제약적인 부분이 많아, MS에서는 익스플로어 내의 스크립트 에서 이러한 작업을 효과적으로 하기 위해 DOM 모델에 몇가지 비표준 기능을 추가 하게 되었습니다. 그것이 HTML문서 태그를 객체화 하는 것이죠.

물론 이러한 개념은 공식적인 HTML 버전이 4.0 까지 계속 메이저, 마이너 업그레이드되면서 DOM 도 마찬가지로 동시에 3.0대까지 같이 업그레이드 되어 왔습니다. 버전차이가 나듯 1세대 인터넷 당시처럼 간단한 텍스트와 이미지만을 보여주던 시대에는 이런 개념이 필요 없었고, 2세대 부터인가 처음으로 사용자의 요구사항을 효과적으로 대응하기 위해 제안되었던 모델이지요. 그러다가 3세대에 와서야 본격적으로 사용되기 시작되었고, 현대에서는 유명한 사이트에 동적인 효과를 주는 곳이면 반드시 사용될만큼 대중적이 되었습니다.

하지만 이제는 매크로미디어의 플레시같은 서드 파티나 유명하진 않지만 참신한 클라이언트 기술들이 좀 더 적은 리소스로 많은 효과를 보여줄 수 있게 됨으로써, DOM 모델에 대한 작업이 약간 시들해지고 있기는 합니다. ^^

여러가지 이유로 DOM 모델은 익스플로어 내에서만 동작하게 수정되었고 MS는 이 논란의 여지를 일축 할만한 추가기능을 더해 자사 전용 표준으로 다시 태어나게 됩니다. 덕분에 여기서 예기하는 DOM개념과 스크립트는 익스플로어 기반에서만 적용된다 라는건 전혀 새로운 사실이 아니지요. DOM 모델은 정확하게는 기억이 나지 않습니다만 익스플로어 4.0대인가 부터 적용하기 시작했습니다.

그땐 참 초보적인 개념에 기능만 가능했는데, 이제는 화면에 보여주기 위한 목적에서는 못하는게 없네요. 그럼 도대체 DOM 모델 이라는게 어떻게 HTML을 객체화하고 효과적으로 제어하기 위해 HTML문서를 처리 할까요? 구구 절절한 설명은 빼고 크게 두가지 정도만 설명을 들으시면 됩니다. DOM 개념으로 만들어진 엔진이 HTML을 로드하여 어떻게 내부적으로 처리하는지와, 어떻게 HTML태그를 객체로 선언하는 방법이지요.

예로 아래와 같은 간단한 잘 정의된 HTML문서를

...

<table>

<tbody>

   <tr>

     <td>Shady Grove</td>

     <td>Aeolian</td>

   </tr>

   <tr>

     <td>Over the River, Charlie</td>        

     <td>Dorian</td>

   </tr>

</tbody>

</table>

...

DOM은 아래 그림과 같이 HTML문서를 조직적으로 재 구성합니다.(익스플로어는 추가적으로 재구성을 하지만 중요하지는 않습니다)

이렇게 로드된 HTML을 비베 스크립트로 제어 할수 있습니다. 이 HTML문서에서 비베 스크립트로 Dorian 이라는 단어를 메시지 박스로 출력하고 싶다면 이렇게 할 수 있습니다.

....

Set oTable = document.getElementsByTagName("table")

MsgBox oTable.Item(0).childNodes(0).childNodes(1).childNodes(1).innerText

....

위에서 사용된 코드는 익스플로어에서 기본 제공되는 document 객체의 기능을 이용하여 HTML 내에 있는 데이터를 뽑아온것입니다. 이렇듯 document 객체는 DOM 모델을 기반으로 만들어져서 업그레이드 되어 왔고, 그만큼 HTML을 제어하기 위한 메소드, 프로퍼티가 많이 늘어나게 되었습니다. 다만 몰라서 안쓰는 것 뿐이죠. 하지만 막상 보면 어렵지 않습니다.

그럼 잠시 위의 코드에 대한 설명을 드리면

이 코드에서 oTable 에는 <table> 태그를 가지는 "컬렉션"을 반환합니다.

Set oTable = document.getElementsByTagName("table")

'<table> 태그는 하나 밖에 없으므로 첫번째의 table을 참조하는 객체를 반환합니다.

oTable.Item(0)

'<tbody> 태그로 위치를 이동합니다.

oTable.Item(0).childNodes(0)

'<tr> 두번째 태그로 위치를 이동합니다.

MsgBox oTable.Item(0).childNodes(0).childNodes(1)

'<td> 두번째 태그로 위치를 이동합니다.

oTable.Item(0).childNodes(0).childNodes(1).childNodes(1)

'<td> 태그안에 있는 텍스트를 출력합니다.

MsgBox oTable.Item(0).childNodes(0).childNodes(1).childNodes(1).innerText

자... 태그 계산이 귀찮기는 하지만 생각 보다 어렵지 않습니다. 오히려 이렇게 HTML을 스크립트로 다루는 게 편해보일 정도지요. 아직까지 이 방법보다 편하게 스크립트로 HTML을 편집하는 모델은 나오지 않았고, 만들어진다는 소식도 없습니다. 이글을 읽으시는 분중 비베 스크립트를 입문한지 얼마되지 않는 다면 위의 코드나 설명이 조금 어려울 수도 있습니다. 그래서 초보 개발자 분들을 위해 코드에 대한 설명을 추가하자면 위의 코드에서는 컬렉션과 배열을 사용 합니다. 그 의미로 조금 중요한데, 자칫 컬렉션과, 배열이 비슷한 점이 많아 의미가 혼동 될 소지가 있기 때문입니다.

컬렉션은 언어마다 해석이 틀립니다만, 적어도 비베 스크립트에서는

자신과 관련된 객체들을 가지는 "객체일뿐"라고 정의 할 수 있습니다.

그래서 컬렉션 자체만으로는 아무런 작업을 할 수 없으며 반드시 컬렉션내에 있는 객체에 접근하여 작업을 해야 합니다. 그러기 위해서 제공되는 기능이 Item 과 Length 이지요. 이것은 비베 스크립트 뿐만 아니라 비베 계열의 모든 언어에서 컬렉션을 작업하게 위해 공통적으로 사용하는 방법 이기도 합니다.

그리고 비베 스크립트에서는 배열구성시 첫 데이터가 0 부터 시작하기 때문에 위와 같이 작성되었습니다. 두번째 데이터를 가리키려면 배열 인자값이 1 이 되겠지요?

자... 그럼 위의 코드를 약간의 응용 해서 Dorian 의 텍스트를 볼드체로 붉은 글자로 변경하고 싶네요.

아래와 같이 작성할 수 있습니다.

...

Set oTable = document.getElementsByTagName("table")

oTable.Item(0).childNodes(0).childNodes(1).childNodes(1).innerHTML = "<font color='red'><b>Dorian</b></font>"

...

이런 식으로 서버와의 통신을 하지 않으면서 DOM 모델을 이용해 스크립트만으로 화면의 디자인을 얼마든지 만들어 내거나, 변경을 할 수 있습니다. 웹 어플리케이션 개발에서 동적으로 화면을 재구성하는 건 모두 이 방식을 따르는 것이지요.

중요한것은 위의 문법은 언어적인 특성을 빼면 비베 스크립트나 J 스크립트모두 비슷하게 작성한다는 겁니다. 스크립트에서 제공하는 기능이 아닌 DOM 모델을 준수하는 "document 객체내의" 메소드와 프로퍼티를 사용하기 때문인데요. INPUT, SELECT, TEXTAREA 와 같은 사용자의 입력을 받는 컨트롤이나 개발자가 별도로 지정한 HTML 객체는 모두 DOM 모델을 준수하는 document 객체의 자식들이기 때문에 메소드와 프로퍼티, 그리고 이벤트를 상속받아 그대로 사용 할 수있게 되는 겁니다.

그래서 익스플로어에서 제공되는 다른 객체도 중요하지만 특히 document 객체는 역할상 상당히 중요한 것이지요.

익스플로어에서 DHTML 개발의 편의 성을 돕기 위해 제공 되는 기본객체중 자주 사용하는 객체는 다음과 같습니다.

> window 객체

인터넷 익스플로러 어플리케이션의 행동을 조절할 수 있는 다양한 객체들의 계층 구조를 이루고 있습니다.  window 객체는 이 계층 구조의 최상위 레벨 객체이고, 다른 모든 객체의 컨테이너 역할을 담당합니다. 그래서 익스플로어를 조작하기 위한 API를 이용해 상태바에 텍스트를 보인다던지 윈도우창의 사이즈를 변경하거나, 새창을 열거나, 닫거나, 모달창으로 화면을 제어하는 등의 작업을 이 객체를 이용함 으로써 할 수 있습니다.

> document 객체

스크립팅 모델에서 두번째로 중요한 객체는 document 객체입니다. 이 객체는 웹 페이지 프로그래밍에서 가장 자주 사용하는 객체입니다.  document 객체는 화백이라고 생각 하면 됩니다. HTML을 직접적으로 연관된 객체라고 생각하면 연상이 쉽습니다. 그래서 HTML을 로드한 상태에서 아래와 같이 코딩해주면

Set oDoc = document.all("body")

oDoc 객체는 <body> 태그의 참조를 가지고 있고, <table>태그의 예제와 마찬가지로 자식 태그내의 데이터를 마음대로 조작 할 수있게 됩니다.

> history 객체

history 객체는 문서의 히스토리를 이용해 웹 페이지를 검색할 수 있는 방법을 제공하는 보이지 않는 객체입니다. 이것은 브라우저의 네비게이션 버튼 같은 기능을 제공하는데, 프로그래밍을 통해 이러한 기능을 사용 할 수 있습니다.

> navigator 객체

이 객체는 history 객체와 마찬가지로 볼 수 없으며, 브라우저에 관한 정보를 반환 합니다. 읽기 전용인 navigator 객체의 속성을 사용해 클라이언트 브라우저, OS, 각 컴포넌트 버전에 관련된 정보에 액세스 할 수 있습니다.

이제 DOM 개념으로 만들어진 엔진이 HTML을 로드하여 어떻게 내부적으로 처리하는 것과 비베 스크립트로 어떤 식으로 처리하는지 감이 오실겁니다. 감이 오셨다면 전 목표는 달성한 거죠. ^^

하지만 위의 예제 코드는 실용성이 매우 떨어지지요. 규모가 큰 포탈이나 쇼핑몰, 하다 못해 게시판같은데에 사용된 HTML도 상당히 복잡하게 되어 있어, 위와 같이 개발자에게 작업하라고 하면, 위지윅 에디터 툴로 불러 온다 해도 머릿속으로 태그 계산하는게 만만한 작업이 아닐 겁니다. 그래서 DOM 모델에는 HTML 태그를 객체로 선언 해서 다이렉트로 스크립트로 접근할 수있는 기능에 대한 표준이 정의 되어 있는데, 흔히 사용하고 있는 태그내의 name 속성이 그 역할을 담당 합니다. 하지만 만일 여러분이 익스플로어 전용으로 웹 어플리케이션을 개발하신다면 DOM에서 제안된 name 속성보다는 MS가 DOM 표준을 자사의 기술에 맞게 수정한 id 속성값을 사용하시는걸 적극 권장합니다.

이 두가지의 속성은 같은 DOM 모델에 의해 설계되었기 때문에 언뜻 HTML을 객체화한다는 개념에는 비슷한 기능을 하지만, 사용 목적이 서로 틀립니다. name 속성은 지금까지 흔히 작업하듯 ASP나 JSP에게 데이터를 넘길 때 서버코드에서 인식할 수 있도록 사용 되는 태그(INPUT, SELECT, TEXTAREA )내에서만 사용가능하며, id는 서버에서 인식할 수는 없지만 HTML 모든 태그내에 사용가능 하다는 장점이 있습니다.

그래서 두가지를 적절히 잘 섞어서 사용해야 합니다.

예제를 하나 더 보도록하지요.

잘 정의된 HTML문서 td 태그에 MASTER 라는 id 속성를 부여 했습니다.

...

<table>

<tbody>

   <tr>

     <td>Shady Grove</td>

     <td>Aeolian</td>

   </tr>

   <tr>

     <td>Over the River, Charlie</td>        

     <td id="MASTER">Dorian</td>

   </tr>

</tbody>

</table>

...

이렇게 로드된 HTML을 아까와 같이 비베 스크립트로 Dorian 이라는 단어를 메시지 박스로 출력하고 싶다면 이렇게 할 수 있습니다.

MsgBox MASTER.innerText

단지 하나의 id 속성을 적절하게 부여하는 것만으로도 이전에 비해 많은 계산이 필요했던거와 비교할수 없을 정도로 원하는 기능을 구현 할 수 있습니다. 이제 개발자에게 남은 것은 이렇게 객체화 된 HTML에서 사용할 수 있는 기능들에 대한 레퍼런스만 알면 나머지는 스스로 응용하실 수 있을 겁니다. 하지만 국내에서 이에 관련된 책은 단 한권도 없고, 정보를 구할 곳도 없습니다. 다행히 MSDN에 가서 보면 레퍼런스가 다른 곳에서 찾아 볼 필요도 없을 만큼 잘 정의 되어있습니다. 이에 대한 주소를 알려드리기전에 먼저 이걸 아시면 이해가 더 쉽게 되실겁니다.

객체라는 단어는 개발자라면 귀에 딱지가 않을 만큼 많이 듣는 단어인데 객체지향 방법론에 의하면 객체는 메소드, 이벤트, 프로퍼티 3가지의 기본조건을 충족해야 한다고 되어 있습니다. 그리고 지금까지 DOM 모델에 의해 코딩하는 HTML요소들도 모두 객체라고 불렀지요? 그래서 비록 익스플로어 내에서만 정상적으로 동작하는게 아쉽기는 하지만 HTML에 id가 부여되면 내부적으로 자동으로 객체화 되며, 이렇게 객체화된 HTML요소는 DOM 모델에 근거한 메소드, 이벤트, 프로퍼티를 알아서 가지게 되는 겁니다. 이렇듯 어떤 객체라해도 근본은 같기 때문에 거의 사용법도 비슷하고, 나중에 비베 스크립트로 XML을 핸들링할때 다시 논의 하겠지만, 사용하는 기본 모델이 DOM 모델이기 때문에 처음 보다 쉽게 이해 하실 수 있습니다.

그럼 자주 사용되는 HTML 태그를 가지고 하나의 예를 더 만들어보죠.

...

<INPUT type="text"     id="txtTest">

<INPUT type="checkbox" id=chkTest>

<INPUT type="radio"    id=rdoTest>

<SELECT   id="selTest"></SELECT>

<TEXTAREA id="selTest"></TEXTAREA>

...

지금은 예제이기 때문에 다섯 개의 HTML 태그에 id를 부여하여 비베 스크립트에서 잡아낼수 있도록 간단하게 선언되었습니다만, HTML 4.0 에 근거한 모든 태그에 id를 부여할수 있으며, MS 내에서만 동작하는 확장태그(DIV, SPAN...)에도 모두 부여 가능 합니다. 하지만 MSDN에는 부여 가능한 모든 목록이 있으니 관심있으신 분은 아래 링크를 선택하세요.

http://msdn.microsoft.com/library/defau ··· ects.asp

그리고 이렇게 객체화된 요소들이 가질수 있는 기본 적인 모든 이벤트에 대한 목록을 보고 싶으시면 아래 링크를 선택하세요.

여기서 주의 하실 점은 "기본 적인" 모든 이벤트라는 겁니다. 이것은 메소드나, 프로퍼티도 마찬가지 인데 위에 선언된 객체중 txtTest 는 텍스트 박스로 선언되었기 때문에 onclick, onfocus, ondrag, ondrop, oncopy 같은 이벤트가 사용가능하지만 chkTest, rdoTest 같이 사용자 키보드 입력을 받을 수 없는 컨트롤에는 ondrag, ondrop, oncopy 같은 이벤트를 사용할 수 없습니다.(당연하겠죠?) 이것 역시 세부적인 메뉴로 들어가면 관련 사항에 대한 자세한 설명이 나와있습니다.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events.asp

객체화된 요소들이 가질수 있는 기본 적인 모든 메소드 대한 목록을 보고 싶으시면 아래 링크를 선택하세요.

http://msdn.microsoft.com/library/defau ··· hods.asp

마지막으로 객체화된 요소들이 가질수 있는 기본 적인 모든 프로퍼티 대한 목록을 보고 싶으시면 아래 링크를 선택하세요.

http://msdn.microsoft.com/library/defau ··· ntry.asp

정리

DOM에 대한 내용이 잘 전달 되었는지 궁금하네요. 추가적인 정보는 MSDN에 설명된 모든 태그 하나하나에 대한 자세한 설명과 예제 스크립트 가 있습니다. 여기있는 것만 알면 기본적으로 스크립트로 HTML을 조작하기위한 기본적인 사항은 모두 숙지 하실수 있습니다. 그럼 첨부터 이거 알려주면 되지 왜 이렇게 바쁜시간 쪼개서 보는데 질질 끌었냐면, MSDN에는 없는 DOM 모델에 대한 응용을 하기 위해서입니다.

다음 에는 위의 내용을 기반해서 MS에서는 밝히지 않는 컨테이너용 태그(FORM, DIV, SPAN)의 중요성과 이를 적극 활용하는 기능, 그리고 비베 스크립트내에서 DHTML 동작을 위해 지원하는 전용 내장 함수의 사용법을 가지고 언제가 될지 모르지만 다시 찾아뵙겠습니다. 읽어주셔서 감사합니다.