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

(2023-06-28)

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 등

JS DOM 제어
   1. DOM 트리 모델   2. DOM 트리,노드   3. DOM 메소드   4. DOM 프로퍼티   5. DOM 노드 접근   6. DOM 요소 컬렉션   7. DOM 크기,위치  
DOM,BOM
   1. DOM   2. BOM  


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