DOM(Document Object Model)이란?
- HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
HTML 요소와 노드 객체
- HTML 요소: HTML 문서를 구성하는 개별적인 요소
- HTML 문서는 HTML 요소의 집합으로 이뤄지고, HTML 요소는 중첩관계를 가짐
- HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계(parent-child)가 형성됨
- 이 관계를 반영하여 HTML 문서의 구성요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함
트리 자료구조(Tree data structure)
- 트리 자료구조는 노드들의 계층 구조로 이뤄짐
- 비선형 구조: 부모노드와 자식노드로 구성되어 노드 간의 계층적 구조를 표현
- 루트 노드(root node): 부모가 없는 최상위 노드 (P)
- 리프 노드(leaf node): 자식 노드가 없는 노드(H, I)
- DOM: 노드 객체들로 구성된 트리 자료구조
- DOM 트리: 노드 객체의 트리로 구조화 되어 있기 때문에 돔을 돔트리라고 부르기도 함
노드 객체의 타입
- DOM은 노드 객체의 계층적인 구조로 구성됨
- 노드 객체는 종류가 있고 상속 구조를 가짐
- 노드 객체는 총 12개의 노드 타입이 있음
가장 중요한 노드타입 4개
- 문서 노드
- DOM 트리의 최상위에 존재하는 루트 노드(document 객체)
- 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체
- DOM트리의 루트 노드이므로 DOM트리의 노드들에 접근하기 위한 진입점 역할을 담당
- 다른 노드들에 접근하려면 문서노드를 통해야 함
- 요소 노드
- HTML 요소를 가리키는 객체
- HTML요소간의 중첩에 의해 부자 관계를 가지고, 정보를 구조화함
- 어트리뷰트 노드
- HTML 요소의 어트리뷰트를 가리키는 객체
- 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있음
- 어트리뷰트 노드는 요소 노드의 형제 노드는 아님
- 어트리뷰트를 참조하거나 변경하려면 요소 노드에 접근해야함
- 텍스트 노드
- HTML 요소의 텍스트를 가리키는 객체
- 문서의 정보를 표현
- 요소노드의 자식노드
- 자식 노드를 가질 수 없는 리프 노드
- DOM트리의 최종단
이 외에도,
Comment 노드, DocumentType 노드, DocumentFragment 노드 등 12개의 노드 타입이 있음
노드 객체의 상속 구조
DOM을 구성하는 노드객체는
ECMAScript 사양에 정의된 표준 빌트인 객체(standard built-in objects)가 아니라,
브라우저 환경에서 추가적으로 제공하는 호스트 객체(host objects)임
but, 노드 객체도 자바스크립트 객체이기 때문에 프로토타입에 의한 상속 구조를 가짐
- 모든 노드 객체 → Object, EventTarget, Node 인터페이스를 상속 받음
- 문서 노드 → Document, HTMLDocument
- 요소 노드 → Element
- 어트리뷰트 노드 → Attr
- 텍스트 노드 → CharacterData
ex. input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용가능
| input 요소 노드 객체의 특성 | 프로토타입을 제공하는 객체 |
| 객체 | Object |
| 이벤트를 발생시키는 객체 | EventTarget |
| 트리 자료구조의 노드 객체 | Node |
| 브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 | Element |
| 웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 | HTMLElement |
| HTML 요소 중에서 input 요소를 표현하는 객체 | HTMLInputElement |
ex)
이벤트에 관련된 기능(EventTarget.addEventListener, EventTarget.removeEventListener 등)
→ EventTarget 인터페이스가 제공
트리 탐색 기능(Node.parentNode, Node.childNodes, Node.previousSibling, Node.nextSibling 등)
& 노드 정보 제공 기능(Node.nodeType, Node.nodeName 등)
→ Node 인터페이스가 제공
DOM
HTML 문서의 계층적 구조, 정보 표현
노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합(DOM API)으로 제공
DOM API(DOM Application Programming Interface)를 통해 HTML의 구조나 내용, 스타일을 동적으로 조작할 수 있음
<출처>
https://velog.io/@alstn3265/%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-%ED%8A%B8%EB%A6%AC
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://velog.io/@solmii/TIL-DOM%EC%9D%B4%EB%9E%80
https://velog.io/@chchaeun/DOMDocument-Object-Model
https://ko.javascript.info/basic-dom-node-properties