오래전 포스트에 객체를 처음 소개하며 문서 객체 모델인 DOM에 대해 잠깐 이야기했었습니다. 이번 포스트부터는 그 DOM에 대해 다뤄볼까 합니다.
1. DOM 소개
DOM은 Document Object Model의 약자로 문자 그대로 해석하면 문서 객체 모델입니다. 왜 문서 객체 모델이냐면 이 자바스크립트의 DOM을 통해 html혹은 xml문서에 접근해 조작할 수 있기 때문입니다. 물론 DOM이 자바스크립트의 전유물은 아니고 다른 언어들에도 들어가 있습니다.그래서 이제까지는 자바스크립트의 기본 문법이었다면 지금부터는 자바스크립트를 본격적으로 이용할 수 있게 됩니다.
2. 문서 트리
문서 트리란, 문서를 트리 구조로 해석한다는 건데, 트리 구조란 상단에서 하단으로 가면 여러갈래로 뻗어나가는 형태를 의미합니다. 하드디스크가 트리구조의 대표적인 예라고 할 수 있겠네요. 다음 그림이 트리구조를 잘 나타내고 있습니다.
본론으로 들어가자면 DOM은 문서를 문서 트리 구조로 해석합니다. HTML을 문서 트리 구조로 본다는건데 말로는 이해가 잘 가지 않습니다. 왜냐면 우리가 아는 html이 트리 구조가 된다는 점이 알쏭달쏭하기 때문이죠.
보편적으로 우리가 아는 html 문서는 다음과 같은 형태를 가집니다.
<html>
<head>
</head>
<body>
<p id="text1">문서 <em>트리</em> 구조</p>
</body>
</html>이 문서 구조를 DOM의 문서 트리구조로 나타내면 다음과 같습니다.
위처럼 문서를 트리 구조로 해석하면서, 요소(html 태그), 속성, 텍스트들을 각각 객체로 다룹니다. 그리고 이 객체들을 노드라는 이름으로 부르게 되어, 요소는 요소노드, 속성은 속성 노드, 텍스트는 텍스트 노드와 같이 부릅니다.
3. 노드
노드는 위에서 언급했듯이 문서를 트리 구조로 해석하면서 나온 문서의 요소, 속성, 텍스트들을 개별 개체로 다루는데 이때 이 객체들을 객체라는 이름대신 노드라고 말합니다. 이 노드들은 요소별 외에도 트리 구조상 노드의 위치에 따라서 루트 노드, 부모/자식 노드, 형제 노드라고도 합니다.
| 노드 | 설명 |
| 루트 노드 | 트리 최상단에 위치하는 노드. 혹은 트리 구조의 최상단에 위치하고 있는 모든 노드들. |
| 부모/자식 노드 | 상하관계의 노드 두 노드중 상단에 위치한 노드를 부모노드, 하단에 위치한 노드를 자식노드라고 한다. |
| 조상/자손 노드 | 상하관계인데 부모/자식 노드와는 달리 직접 연결되어있지 않고 한 단 이상 떨어져있는 상하관계의 노드. |
| 형제 노드(형 노드, 동생 노드) | 동일한 부모를 노드로 가지고 있는 노드들을 형제 노드라고 합니다. 이때 먼저 작성된 노드가 형 노드, 나중에 작성된 노드가 동생 노드입니다. |
그래서 DOM은 이 노드들을 다룰 수 있는(추출/치환/삭제 등) 기능들을 제공하여 사용할 수 있게 해줍니다.
상기한 내용들이 DOM에 대한 기초적인 지식들이며, 다음 포스트부터 DOM을 다루는 법을 포스팅하려고 합니다.
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] 노드 워킹 (0) | 2021.03.24 |
|---|---|
| [Javascript] 노드 취득 (0) | 2021.03.24 |
| [Javascript] 객체의 상속 - 프로토타입 체인 (0) | 2021.03.19 |
| [Javascript] class 명령을 이용한 클래스 정의 (0) | 2021.03.19 |
| [Javascript] this (0) | 2021.03.18 |
댓글