DOM이란?
웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.
DOM은 어떻게 생성되고 어떻게 보여질까?
DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 하다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다.
트리 자료구조는 노드들의 계층 구조로 이루어져 있다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조를 나타낸다.
트리 자료 구조이기 때문에, HTML 문서는 최종적으로 하나의 최상위 노드(root 노드)에서 시작해 자식 노드들을 가지며, 아래로만 뻗어나가는 구조로 만들어지게 된다.
위와 같은 코드가 있을 때 해당 문서를 트리 구조로 표현한다면 아래와 같이 표현된다.
document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조로 구성된다.
노드 타입
1. document node (문서 노드)
DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다. HTML 문서 전체를 나타내는 노드로 window 객체의 document 프로퍼티로 바인딩(연결)이 되어 있어 window.document , document로 참조해 사용할 수 있다. HTML 문서에 이 문서 노드는 오로지 1개만 존재한다.
2. element node (요소 노드)
모든 HTML 요소 (body, h2, div 등)는 이 요소 노드이다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 된다.
3. attribute node (속성 노드)
모든 HTML 요소의 속성은 이 속성 노드로 요소 노드에 대한 정보를 가지고 있어 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있다.
4. text node (텍스트 노드)
HTML 문서의 모든 텍스트는 대부분 이 텍스트 노드로 이뤄져있다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다해 리프 노드라고 불리기도 한다.
이 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 된다. 특히 데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 이 접근하고 조작하여 업데이트를 하는 속도는 빠른 편이다.
