책 "DOM을 깨우치다" 정리노트 :: Node 개요
DOM 정의:
- Dom(Document Object Model)은 웹 서버를 통해 내려받은 "HTML" 코드를 브라우저가 해석 후 JavaScript 객체를 통해 계층화한 구조체(의미상(트리 구조))를 의미한다.
구조체란?: http://ko.wikipedia.org/wiki/Struct
DOM 목적:
- JavaScript를 통해 문서(HTML, XHTML, XML 등)의 각 요소들을 핸들링하기 위한, 프로그래밍 인터페이스를 제공한다.
DOM 트리:
- HTML 문서의 각 요소들은 가장 오른쪽 패널에서와 같이 브라우저에 의해 해석된 후, Javascript 객체(Object, Node 등)를 통해 계층화된 트리 구조로 변환된다.
또한, 브라우저를 통해 생성(해석 후)된 DOM에 대한 JavaScript 객체 상속 관계는 아래와 같다.
츨처: http://www.stanford.edu/class/cs98si/slides/the-document-object-model.html
DOM 상속 관계:
- 아래 그림의 상속 관계는 html 엘리먼트의 상속 관계를 나열한 것이며, 객체 상속의 시작은 최상위 조상인 Object.prototype 객체로 부터 참조가 시작된다.
1. EventTarget.prototype 객체는 Object 객체를 상속받아 확장한다.
2. Node 객체는 EventTarget 객체를 상속받아 확장한다.
3. DocumentType 객체는 Node 객체를 상속받아 확장한다.
정리하면, 아래와 같은 상속 관계가 만들어지며, DOM 상의 모든 ElementNode들은 아래 나열한 객체들을 상속받아 확장하게되는 것이다.
Object < EventTarget < Node < DocumentType < <!DOCTYPE html>(ElementNode)
또 다른 예로, html 요소를 클릭 시 아래 그림과 같은 상속 관계를 확인할 수 있다.
Object < EventTarget < Node < Element < HtmlElement < HtmlhtmlElement < html(ElementNode)
- 결국 아래 코드와 같이 html ElementNode는 상속(Object, EventTarget, Node, Element, HtmlElement, HTMLhtmlElement) 받은 모든 객체의 속성 및 메서드들을 사용할 수 있게되는 것이다.
특히, 상속받는 객체 중 하나인 Node 객체는 DOM을 조작, 조사, 탐색하는 기준이 되는 많은 속성 및 메서드들을 정의하고 있다.
결과:
