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 등