[JS] DOM
DOM
DOM(document object model)은 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는데 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.
이 글 쓰면서 몇 번을 엎었는지… 생각보다 개념 잡는게 어려웠다.
Achievement Goals
- DOM의 개념을 이해할 수 있다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
- HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.
<script>태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.
DOM을 알기 위해선 트리자료구조를 먼저 설명해야 한다.
다음 그림을 보자
트리 자료 구조란 그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조이다. 간단하게는 회로가 없고, 서로 다른 두 노드를 잇는 길이 하나뿐인 그래프를 트리라고 부른다.
트리에서 최상위 노드를 루트 노드(root node 뿌리 노드)라고 한다. 또한 노드 A가 노드 B를 가리킬 때 A를 B의 부모 노드(parent node), B를 A의 자식 노드(child node)라고 한다. 자식 노드가 없는 노드를 리프 노드(leaf node)라고 한다. 리프 노드가 아닌 노드를 내부 노드(internal node)라고 한다.
이처럼 트리 자료 구조는 노드들의 계층 구조로 이뤄지는데 노드 객체들로 구성된 트리 자료 구조를 DOM이라 부른다.
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #ff0000; }
.blue { color: #0000ff; }
</style>
</head>
<body>
<div>
<h1>Cities</h1>
<ul>
<li id="one" class="red">Seoul</li>
<li id="two" class="red">London</li>
<li id="three" class="red">Newyork</li>
<li id="four">Tokyo</li>
</ul>
</div>
</body>
</html>
이처럼 DOM은 노드 객체의 계층적인 구조로 구성된다. 노드 객체는 종류가 있고 상속 구조를 갖는다. 노드 객체는 총 12개의 종류가 있는데 이 중 중요한 노드 타입은 다음 4가지다
-
문서 노드
트리의 최 상위에 존재하는 루트 노드로서 document객체를 가리킨다. HTML문서당 문서노드 즉, document 객체는 유일하다. DOM트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 시작점 역할을 담당한다. 즉 요소, 어트리뷰터, 텍스트 노드에 접근하려면 문서 노드를 통과해야 한다.
-
요소 노드
요소 노드는 HTML 요소를 가르키는 객체다. 요소 노드는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화 한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.
-
어트리뷰트 노드
어트리뷰트 노드는 HTML요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.
-
텍스트 노드
텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.
DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API(Application Programming Interface)로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
중요한 것은 DOM API가 제공하는 프로퍼티와 메서드를 사용해 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이다.
생각 해본 점
과연 면접장에서 DOM이 뭐에요? DOM은 뭐하는데 써요? 라고 질문 받으면 적절한 답변을 할 수 있을까?
이번 챕터는 생각이 좀 많아지게 된다.