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

(2021-08-17)

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

  ※ [참고] ☞ MDN의 DOM 소개 참조


2. DOM 표준 권고

  ㅇ DOM Level 0 (비표준적임 )  : 일명 BOM 이라고도 함 (window,location,history 객체 등)
     - 표준화되기 이전의 브라우저 객체 모델W3C 표준                                               ☞ W3C DOM 관련 홈페이지
     - 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 모듈 정의
     - DOM Level 4 (2015년11월)


3. DOM 모델 설계 방침

  ㅇ `객체지향`적 설계
     - HTML 문서 내의 모든 요소를 객체화해서 표현하고 접근토록 함

  ㅇ 문서를 `트리 구조`로 표현 
     - HTML 문서를 텍스트가 아닌, 트리 구조를 갖는 객체들의 계층적 구조로 표현

  ㅇ DOM은, 크게 다음의 3가지를 정의하고 있음
     - 문서에 대한 논리적 구조 => 트리 구조
     - 동적 접근 방법 => (자식,형제,부모 등 관계에 의해서 접근 가능)
     - 동적 제어 방법 => (삭제,추가,바꾸기,이벤트 처리,수정 등)


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

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

  ㅇ 웹페이지 내 모든 것을, 노드 객체들의 트리 구조로써 바라다 봄
     - 웹 브라우저가, 웹페이지를 읽고, DOM 모델에 의해, DOM 트리를 생성해 냄
        . 즉, HTML 문서의 로드, HTML 문서의 구문 해석, 노드 객체들의 트리구조 생성 등을 함

  ㅇ DOM은, 객체 형태로 표현됨


5. DOM 트리구조노드

  ※ ☞ DOM 트리, DOM 노드 참조
     - 루트 노드는, document 노드이고,
     - 이것의 자식 노드는, html 노드이며, 
     - html 노드 밑에 다수의 요소 노드들이, 전형적인 트리 구조를 구성함


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

  ※ ☞ DOM 노드 접근 참조
     - id명,태그명,클래스명 등에 의한 접근
     - CSS 선택자 API로 접근 (CSS query selector)
     - DOM 단축 표기에 의한 접근 등


7. DOM 노드 객체프로퍼티메소드 DOM 프로퍼티DOM 프로퍼티 (DOM Property)
     - DOM 노드속성
        . 노드 정보 : nodeType, nodeName, childNodes, nodeValue 등
        . 노드 관계 : parentNode, childNodes, firstChild, lastChild 등

  ㅇ DOM 메소드DOM 메소드 (DOM Method)
     - DOM 트리의 조작 (노드의 생성,추가,삭제,대체 등)


8. DOM 이벤트                                        

  ※ ☞ 표준 DOM 이벤트 참조
     - 마우스 이벤트     : click, dblclick, mousemove, mouseover 등
     - 키보드 이벤트     : keydown, keyup, keypress 등
     - 폼 이벤트         : submit, reset, change, focus, blur 등
     - 문서(document)/창(window) 이벤트 : load, resize, scroll, unload 등



Copyrightⓒ written by 차재복 (Cha Jae Bok)       편집이력
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"