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

(2019-02-12)
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 노드 접근

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

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 등


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

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