DOM

노드

HTML 요소는 렌더링 엔진에 의해 파싱 되어 DOM을 구성하는 요소인 노드 객체 로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.

---

노드 객체의 상속 구조

DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API 를 사용할 수 있다. 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있고, 자신의 어트리뷰트와 텍스트를 조작할 수도 있다.

예를 들어 input 태그가 있다고 생각하자. input 태그는 HTMLInputElement 노드 객체이며, 이 노드는 HTMLElement를 상속받고, HTMLElement는 Element를 상속받고, Element는 Node 객체를 상속받고, Node 객체는 EventTarget 을 상속받고 EventTarget 은 Object 를 상속받는다. 따라서 input 태그는 상속받는 모든 객체의 프로퍼티나 메서드를 상속받아 사용할 수 있다. 이는 각각의 노드 객체들이 프로토타입 체인으로 연결되어 있기 때문이다.

정리하자면 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.

대표적으로 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있고, 이벤트와 관련된 프로퍼티 및 기능은 EventTarget 인터페이스가 제공한다.

---

💥 중요한 포인트

DOM 구조는 복잡하고 이해하기 어려울 수 있다. 중요한 것은 DOM tree 구조를 외우는 것이 아니라 DOM API를 이용해서 노드에 접근하고 HTML 구조를 동적으로 변경하는 방법을 익히는 것이다. 즉, HTML을 DOM과 연관 지어 바라보아야 한다.