DOM Document Object Model 다큐먼트 객체 모델, 문서 객체 모델

1. DOM (Document Object Model) API

  ㅇ 웹 페이지 내의 모든 요소에 접근 가능케하는 표준 API
     - 웹브라우저의 제작사별,버젼별,플랫폼,언어 차이에 의존하지 않고,
     - 표준적인 프로퍼티(Property) 및 메소드(Method)를 통해 접근하는 기반 모델

  ※ ☞ W3C DOM 관련 홈페이지


2. DOM 특징

  ㅇ 웹 브라우저에 의존하지 않음
     - 플랫폼, 프로그래밍 언어에 비의존적인 독립적인 인터페이스를 제공

  ㅇ 웹 페이지에 동적으로 접근 및 변경 가능
     - 객체, 프로퍼티, 메서드, 이벤트를 통해서 접근하고, 
     - 스크립트(자바스크립트 등)를 사용해서,
     - 웹 페이지의 컨텐츠를 동적으로 변경할 수 있게 함

  ㅇ 크게 다음의 3가지를 정의하고 있음
     - 문서에 대한 논리적 구조, 동적 접근, 동적 제어 방법을 정의 

  ㅇ 주요 설계 방침
     - 객체지향적 설계
        . 문서 내의 모든 요소를 객체화해서 표현하고 접근토록 함
     - 문서를 트리형 구조로 표현 
        . HTML 문서에대해 단지 텍스트가 아닌, 트리구조를 갖는 객체들의 계층적 구조로 표현


3. DOM 산업표준 및 표준 권고

  ㅇ DOM Level 0 (비표준적임 )  : 일명 BOM 이라고도 함 (window,location,history 객체 등)
  ㅇ W3C 표준
     - DOM Level 1 (1998년10월) : Core,HTML 모듈 정의
     - DOM Level 2 (2000년11월) : Core,HTML,Views,Events,Style 등 모듈 정의
     - DOM Level 3 (2004년4월)  : Core,Load and Save,Validation,Xpath,Events 모듈 정의


4. DOM 노드 객체 표현

  ㅇ DOM API는 웹페이지 문서 내의 모든 것을 노드 객체로 바라다 봄
     - 웹 브라우저가 HTML 문서를 로드하면 자동적으로 객체들을 생성
        . 문서 내의 모든 요소 노드는 객체

  ㅇ DOM 노드 객체의 종류
     - 도큐먼트 객체 : HTML 태그 당 하나의 객체
     - 디폴트 객체   : 초기에 자동으로 생성되는 객체  ☞ BOM(Browser Object Model) 참조
        . window, document, history, location, navigator, screen 등
     - 속성 객체     : 속성, 스타일, 텍스트를 표현하는 객체
        . attribute, style, runtimeStyle, currentStyle, rule, textNode,
          textRange, textRectangular
     - 임시 객체     : 문서 처리 중에 동적으로 생성되는 임시적인 객체
        . clipboardData, dataTransfer, event, popup, selection
     - 기타 객체     
        . custom, namespace, ...

  ㅇ DOM 객체에 접근하는 방법
     - id를 사용하는 접근방법        : getElementByID
     - name 속성을 이용하는 접근방법 : getElementByTagName => 결과가 배열로 얻어짐
     - all 컬렉션을 이용하는 접근방법
     - all 이외의 다른 컬렉션을 이용하는 접근방법
     - this를 이용하는 접근방법


5. DOM 프로퍼티 및 메소드 

  ㅇ DOM 프로퍼티 ☞  DOM 프로퍼티 (DOM Property)

  ㅇ DOM 메소드   ☞ DOM 메소드 (DOM Method)


6. DOM 이벤트                                                     

  ㅇ onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, 
     onmousemove, onmouseover, onmouseout, onmouseup


7. DOM 확장

  ㅇ 선택자 API
     - querySelector(),querySelectorAll(),matchsSelector() 메소드 등

  ㅇ HTML5 API