■ 특징
1. DOM은 window객체 중 하나이다. (window.document / window.location / window.navigator / window.history / etc...)
2. DOM은 브라우저 환경에서 만들어진다.
3. DOM은 트리와 같은 계층구조와 정보를 표현한다. (트리 자료구조)
4. 노드 객체의 종류, 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 그리고 이 DOM API를 통해 HTML의 구조와 내용 또는 스타일 등을 동적으로 조작할 수 있다.
■ DOM 정의
- 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.
※ DOM은 HTML 문서를 parsing한 결과물이다.
■ DOM 생성과정
1. 브라우저는 최초로 서버에 HTTP request하고 response를 받을 때 바이트(2진수)의 형태로 HTML 문서를 받는다. 그리고 응답된 HTML 문서는 meta 태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식을 기준으로 문자열을 변환한다.
2. 문자열(태그)로 변환된 HTML문서를 읽고 브라우저는 "문법적 의미"를 갖는 코드의 최소 단위인 "토큰"들로 분해한다.
3. 각 토큰들을 객체로 반환하여 노드를 생성한다. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성된다. 노드는 이후 DOM을 구성하는 기본 요소가 된다.
※ HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩관계를 같는다. 중첩 관계에 의해 부자관계가 형성되고 이러한 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이 노드들로 구성된 트리 자료구조를 DOM이라고 부른다.
■ 노드 객체의 상속 구조
- HTMLHeadingElement는 EventTarget을 상속 받기 때문에 addEventListener의 대상이 될 수 있다.
- 위 상속도에 따라 자식은 부모의 기능들을 고스란히 물려 받아 사용할 수 있다. 그렇기 때문에 자식인 HTMLHeadingElement는 node의 속성들에 접근할 수 있다. 그리고 자바스크립트에 의해 동적으로 제어가 가능하다.
■ HTML Attribute vs DOM Property
※ 어트리뷰트는 DOM 프로퍼티의 초기값을 지정하고 역할이 끝난다. 값도 변하지 않는다. 프로퍼티는 값을 바꾸면서 계속 유지된다.
- Attribute는 HTML문서(Element)의 정적인 속성을 말한다. (a태그의 attribute로 "href", "class" 등 태그 안에 임베디드된 것이라고 볼 수 있다.)
- Property는 DOM(Node)의 동적 인 속성이다. (className, nodeName, etc...)
댓글