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

(2017-02-19)
통신/네트워킹통신이론
선로/전송
통신망 일반
회선교환(PSTN)
무선/이동통신
광통신
인터넷/데이터통신
 > 인터넷/데이터통신 1. 데이터통신망
2. 인터넷
3. 데이터 네트워크 설계

데이터 단위
프로토콜/계층
데이터 링크
TCP/IP
라우팅
인터넷 QoS
인터넷 관리
인터넷 응용
인터넷 기타
패킷교환(PSN)
인터넷 관련 기관
 > 인터넷 응용NetBIOS
DNS
가상단말
FTP
전자메일
VoIP
웹기술
VPN
무선인터넷
전자상거래
개인 컨텐츠
인터넷 기타 응용
 > 웹기술 1. 웹 이란?
2. 하이퍼텍스트

웹 구성
HTTP
웹 언어
웹 식별체계
차세대 웹
웹기술 기타일반
 > 웹 언어마크업 언어
스크립트 언어
DOM,BOM
웹페이지 기능 요소
웹 디자인
 > DOM,BOM 1. DOM
2. DOM 프로퍼티
3. DOM 메소드
4. BOM

     
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 이벤트이벤트(Event) 참조

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


7. DOM 확장

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

  ㅇ HTML5 API


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

 
        최근수정     모바일웹     참고문헌