문서 객체 모델(DOM), 노드 구조와 개념 정리

 

 

문서 객체 모델(DOM)과 노드 구조와 개념에 대해 정리해보겠습니다. 

 

이전 글에서 브라우저 객체 모델을 공부하면서, 마지막에 document 객체에 대해 알아보았었습니다.

 

브라우저 객체 모델 6가지 정리, 사용법

 

브라우저 객체 모델(BOM)의 document 객체는 웹페이지 그 자체이며, 그와 관련된 기능을 제공하는 객체였습니다.

 

문서 객체 모델(DOM)은 웹페이지를 스크립트 언어와 연결해주는 계층 구조의 인터페이스 정도로 이해하시면 되며, 문서 객체 모델 자체는 자바스크립트 언어가 아닙니다. 

 

이번 글에서는 다음과 같은 것들을 이야기해보겠습니다.

 

 

 

 

문서 객체 모델의 구조와 개념

 

문서 객체 모델은 아래와 같이 계층 구조로 되어 있으며, 웹 문서 안의 모든 요소를 정의하고 요소에 접근하는 방법을 제공합니다.

 

우리가 작성한 HTML 문서를 구조화해서 표현하는 것이죠.

 

DOM 트리구조 (출처: 위키백과)

 

DOM 트리의 끝은 Node입니다.

 

DOM은 각 노드에 해당하는 태그나 속성을 모두 '객체'로 제공합니다.

 

따라서 HTML 문서의 요소들은 자바스크립트 내장 객체처럼 자유롭게 접근이 가능며 동적으로 변경할 수 있습니다.

 

여기까지만 이해해도 DOM이라는 인터페이스를 이용해서 자바스크립트로 HTML 요소들을 조작할 수 있구나하고 이해할 수 있습니다.

 

 

Node의 구조와 개념

 

이제 한 단계 더 나아가서, 노드라는 것에 대해 알아봅시다. 노드는 실제 요소들을 선택하고 조작하는데에 쓰이는 메소드들을 제공하거든요.

 

DOM은 웹 문서를 4가지의 노드로 나누고 있습니다.

 

1. Document Node : DOM 트리의 최상위 노드이자 시작점입니다.
2. Element Node : 요소가 부모 자식 관계로 나타나있으며 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드에 접근해야 합니다.
3. Attribute Node : HTML 요소의 일부인 속성 노드이며 요소 노드를 통해 접근해서 참조, 수정할 수 있습니다.
4. Text Node : HTML 요소의 텍스트 노드이며, 요소 노드의 자식이자 DOM 트리의 가장 작은 단위입니다.

 

이 밖에 주석 노드(comment node)도 있지만 주석에 해당하는 것이니 따로 신경쓸 필요는 없겠습니다.

 

모든 DOM 요소는 Node 객체를 상속받습니다. 즉, HTML 요소들은 노드에 속하며 노드의 기능을 전부 쓸 수 있다는 의미입니다.

 

노드 상속도 (출처 : 코뮤 블로그)

 

이러한 노드(객체)들과 그 구조를 통해 우리는 웹 문서의 정보, 구조, 요소 등 에 접근하고 동적으로 변경할 수 있습니다.

 

 

개념이 어렴풋이 이해가 되었다면, 아래 글에서 실제로 DOM과 노드를 활용해 HTML 문서를 자유자재로 다루는 방법을 알아보세요.

 

자바스크립트로 HTML을 조작하는 방법

 

여기까지 문서 객체 모델(DOM), 노드 구조와 개념 정리를 마치겠습니다. 읽어주셔서 감사합니다.