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

(2019-02-12)
Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
DOM,BOM   1. DOM
  2. BOM

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
정보기술(IT) >   1. 정보기술
[전산기초]
[컴퓨터구조]
[프로그래밍]
[데이터베이스]
[소프트웨어 공학]
[운영체제]
[정보보호/보안]
[IT 기타기술]
프로그래밍 >   1. 프로그램,프로그래밍
[프로그래밍 언어론]
[구조적 프로그래밍]
[객체지향 프로그래밍]
[자료표현코드]
[자료구조]
[알고리즘]
[시스템 소프트웨어]
[프로그래밍언어 종류]
[프로그래밍 기타일반]
프로그래밍언어 종류 >   1. 프로그래밍 언어
[C]
[C++]
[자바(Java)]
[자바스크립트]
[PHP]
[파이썬]
[(기타 언어)]
자바스크립트 >   1. JavaScript
  2. JS 연산자
  3. 기초 문법
[JS 변수,타입]
[JS 함수]
[JS 객체]
[JS 배열]
[JS 활용]
[JS 웹문서 제어]
JS 웹문서 제어 >   1. 웹문서 내 JS
  2. 동일 출처 정책
[JS Window 객체]
[JS DOM 제어]
[JS 이벤트]
[Ajax]
[jQuery]
JS DOM 제어   1. DOM 트리
  2. DOM 메소드
  3. DOM 프로퍼티
  4. DOM 노드 접근

1. DOM (Document Object Model) API

  ㅇ 응용 프로그램(자바스크립트 등)이 웹 페이지 내 모든 요소에 접근할 수 있는 표준 API 모델
     - 웹브라우저의 제작사별,버젼별,플랫폼,언어 차이에 의존하지 않고,
     - 표준적인 프로퍼티(Property) 및 메소드(Method)를 통해 접근/제어하는 기반 모델

  ※ ☞ W3C DOM 관련 홈페이지


2. 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 모듈 정의
     - DOM Level 4 (2015년11월)


3. DOM 모델 설계 방침

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

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

  ㅇ DOM은, 크게 다음의 3가지를 정의하고 있음
     - 문서에 대한 논리적 구조 => 트리 구조
     - 동적 접근 방법 => 아래 6.번항 참조
     - 동적 제어 방법 (삭제,추가,바꾸기,이벤트 처리,수정 등)


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

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

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


5. DOM 트리 구조

  ㅇ DOM 트리구조를 구성하는 객체 하나하나를 노드(Node) 라고 함
     - 루트 노드는 document 이고, 이것의 자식 노드html 뿐 임

  ㅇ 루트 노드를 제외하고, 모든 노드에는, 다음과 같은 특징들이 있음
     - 부모 노드가 있고, 자식 노드는 없어도 됨
        . parentNode : 자신의 직계 부모 노드를 가리킴. document 노드null
        . childNodes : 모든 직계 자식 노드들을 가리키는 유사 배열
     - nodeType (어떤 타입 => 정수 값), nodeName (대문자 이름) 프로퍼티가 있음

  ㅇ 노드의 종류는, 
     - 요소,텍스트,속성,주석,문서 등으로써 웹페이지 내 모든 것들을 노드로써 봄


6. DOM 노드 객체의 종류

    

  ㅇ 주요 종류 구분
     - 문서 노드 : HTMLDocument 요소 (문서 그 자체, 루트 노드)
        . 전체 문서를 가리키는 Document 객체 (document로 참조 가능)
     - 요소 노드 : HTML*Element로써, HTMLFormElement, HTMLLIElement 등으로 구체화된 태그 요소
        . 즉, HTML 태그 당 하나의 객체
     - 속성 노드 : 속성, 스타일, 텍스트를 표현하는 객체
        . attribute, style, runtimeStyle, currentStyle, rule, textNode, textRange, 
          textRectangular 등

  ※ ☞ DOM 모델 상의 노드(nodeType) 유형 (현재 수행중인 웹브라우저 내에서 실행)
     

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

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


8. DOM 노드 객체프로퍼티메소드 DOM 프로퍼티DOM 프로퍼티 (DOM Property)

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


9. DOM 이벤트                                        

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


[DOM,BOM] 1. DOM 2. BOM
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
            2.   DOM,BOM
              1.   1. DOM
                  2. BOM
            3.   기능 요소
            4.   웹 디자인
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌