DOM

** DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.**

노드

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이떄 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 노드 객체의 트리로 구조화되어 있기 때문에 DOM 트리라고 부르기도 한다. DOM은 노드 객체의 계층적인 구조로 구성된다. 노드 객체는 종류가 있고 상속 구조를 갖는다. 노드 객체는 총 12개의 종류(노드 타입)가 있다. 이중에서 중요한 노드 타입은 다음과 같이 4가지다.

문서노드(document node) DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. HTML 문서당 document 객체는 유일하다. document 객체는 DOM 트리의 루트 노드이므로 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.
요소노드(element node) HTML 요소를 가리키는 객체다. 요소 노드는 문서의 구조를 표현한다고 할 수 있다.
어트리뷰트 노드(attribute node) HTML 요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.
텍스트 노드(text node) HTML 요소의 텍스트를 가리키는 객체다. 텍스트 노드는 문서의 정보를 표현한다고 할 수 있다. 텍스트 노드는 요소 노드의 자식 노드이며, 리프 노드(leaf node)이다. 즉, DOM 트리의 최종단이다. 따라서 텍스트 노드에 접근하려면 부모 노드인 요소 노드에 접근해야 한다.

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

중요한 것은 DOM API, 즉 DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이다. 프런트엔드 개발자에게 HTML은 단순히 태그와 어트리뷰트를 선언적으로 배치하여 뷰를 구성하는 것 이상의 의미를 갖는다. HTML을 DOM과 연관 지어 바라보아야 한다.

웹에서는 수많은 이벤트가 발생하고 흐른다.

브라우저로 부터 발생하는 이벤트
사용자의 인터랙션에 의해 발생하는 이벤트
DOM의 변화로 인해 발생하는 이벤트 발생하는 이벤트는 그저 자바스크립트 객체일 뿐이다. 브라우저의 Event Interface에 맞춰 구현된 객체다. 여러 DOM Element로 구성된 하나의 웹 페이지는 Window를 최상위로 하는 트리를 생성하게 되고 이벤트는 이벤트 각각이 갖게 되는 전파 경로를 따라 전파된다. 이 전파 경로는 DOM Tree 구조에서 Element 위상에 의해 결정된다.