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

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

  ※ ☞ W3C DOM 관련 홈페이지


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

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

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

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

  ㅇ 웹페이지 문서 내의 모든 것을 노드 객체들의 트리 구조로써 바라다 봄
     - 웹 브라우저가, HTML 문서의 로드, HTML 문서의 구문 해석, 노드 객체들의 트리구조를 생성
     - DOM 트리구조를 구성하는 객체 하나하나를 노드(Node)라고 함
        . 루트 노드를 제외하고, 모든 노드에는, 부모 노드가 있고, 자식 노드는 없어도 됨
           .. 루트 노드는 document 이고, 이것의 자식 노드html 뿐 임
        . 모든 노드에는, nodeType, nodeName 프로퍼티가 있음


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 노드 객체의 종류

    
     

5. DOM 노드 객체에 접근하는 방법

  ㅇ id를 사용하는 접근   : getElementByID(id)
  ㅇ 태그명에 의한 접근   : getElementByTagName(tag) => 결과가 유사 배열 형태로 얻어짐
  ㅇ 클래스명에 의한 접근 : getElementsByClassName(class) => 결과가 유사 배열 형태로 얻어짐

  ※ 한편, 선택자 API로도 가능 (CSS 선택자에 의해 요소 찾기)
     - querySelector(selector)
     - querySelectorAll(selector)
     - matchSelector(selector) 등


6. DOM 노드프로퍼티메소드 DOM 프로퍼티DOM 프로퍼티 (DOM Property)

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


7. DOM 이벤트이벤트(Event), 표준 DOM 이벤트 참조

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


[DOM,BOM] 1. DOM 2. DOM 프로퍼티 3. DOM 메소드 4. BOM

 
        최근수정     요약목록(시험중)     참고문헌