DOM이란 무엇일까?

DOM (Document Object Model, 문서 객체 모델)

DOM은 HTML, XML 문서에 접근하기 위한 인터페이스이다. Javascript와 같은 언어가 문서에 접근할 수 있도록 콘텐츠, 구조, 스타일 요소를 구조화시켜 제공하고, 이를 변경할 수 있도록 한다. Javascript가 DOM을 다루는 대표적인 언어이긴 하지만, 이외의 다른 프로그래밍 언어들도 DOM에 접근하고 사용할 수 있다!

 

DOM은 웹페이지(HTML 문서)를 트리 구조로 표현한다. 즉, 웹페이지는 하나의 최상위 노드(root 노드)에서 시작하는 자식 노드들을 가진다. 노드의 타입은 총 12개이며, 주요 노드는 아래의 4가지이다.

 

 

DOM 트리의 주요 노드

1) document node (문서 노드)

: DOM 트리 구조의 최상위 루트 노드로, document 객체를 가리킨다. window.document, document로 참조해 사용할 수 있다.

 

2) element node (요소 노드)

: body, div, p 등 모든 HTML 요소가 element node에 포함된다. 

 

3) attribute node (속성 노드)

: HTML 요소의 속성은 모두 attribute node에 포함된다.

 

4) text node (텍스트 노드)

: HTML 문서의 텍스트들이 text node에 포함되며, 가장 마지막에 위치하는 자식 노드(리프 노드)이다. 

 

 

DOM의 주요 데이터 타입

1) document: DOM의 루트 노드로, DOM 트리의 진입점 역할을 수행한다.

2) element: element node에 포함되는 요소들을 의미한다.

3) nodeList: 요소의 집합(배열)이다. document.getElementsByTagName() 로 element 배열이 반환될 때 해당 타입으로 반환된다.

4) namedNodeMap: 요소 속성들의 집합이다. 인덱스로 접근할 수 있지만, 순서는 큰 의미가 없다. 노드가 추가되거나 삭제되면 자동으로 업데이트 된다.

 

 

DOM과 자바스크립트

우리가 작성한 HTML 문서는 위에서부터 아래로 읽어내려지며 DOM 트리 구조를 이룬다. 이후 자바스크립트로 웹페이지에 새로운 요소나 속성 등을 추가하는 것이 즉 새로운 노드를 생성하는 것이고, 이 구조가 렌더링되어 화면에 나타난다.

 

새로운 div 추가하기

새로운 element 노드를 생성하고, 그 노드를 기존의 요소 혹은 body 아래로 붙여준다.

const newDiv = document.createElement('div');  // 새 노드 생성
document.body.append(div);  // body에 div 붙이기

 

 

div 내용/속성 변경하기

아래와 같이 element 의 프로퍼티/메서드로 접근해서 필요한 동작을 수행할 수 있다!

div.textContent = '추가할 텍스트';
div.setAttribute("style", "width: 300px");

 

 

 

참고자료

MDN, DOM 소개

DOM 소개 - Web API | MDN

 

코드스테이츠, 문서 객체 모델 DOM과 자바스크립트 JavaScript | 생성 방식 및 접근 방법

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로