[Javascript] JS DOM 이란?

DOM Document Object Model

DOM(문서 객체 모델)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.

문서 내의 모든 요소, 요소의 속성, 그리고 텍스트를 각각의 객체로 만들고 이들 객체를 부모-자식 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다.

이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

 

 

DOM은 W3C의 표준 객체로, 아래와 같이 계층 구조로 표현되며, 네 종류의 노드로 구성된다.

 

문서 노드(Document Node)

트리의 최상위에 존재하며 다른 모든 노드에 접근하기 위해서는 반드시 문서 노드를 통해야 한다.

따라서 DOM tree에 접근하기 위한 entry point 이다.

 

요소 노드(Element Node)

요소 노드는 HTML 요소를 표현하며, 어트리뷰트, 텍스트 노드에 접근하려면 요소 노드에 먼저 접근해야 한다.

 

어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 속성을 표현하며, 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

 

텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 

요소 노드의 자식이며 자신의 자식 노드를 가질 수 없으며,  DOM tree의 최종단이다.

 

 

Javascript가 DOM을 사용해 할 수 있는 작업

- 자바스크립트는 page(HTML 문서)의 모든 HTML 요소를 변경할 수 있다.

- 자바스크립트는 page(HTML 문서)의 모든 HTML 속성을 변경할 수 있다.

- 자바스크립트는 page(HTML 문서)의 모든 CSS 스타일을 변경할 수 있다.

- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.

- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.

- 자바스크립트는 HTML 문서에 있는 모든 HTML 이벤트에 반응할 수 있다.

- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.

 

 

DOM의 종류

 - W3C DOM 표준은 아래 세 가지 모델로 구분된다.

 

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

2. HTML DOM : HTML 문서를 위한 DOM 모델

3. XML DOM : XML 문서를 위한 DOM 모델

 

참고
https://www.w3schools.com/js/js_htmldom.asp
https://poiemaweb.com/js-dom