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

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

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

1. DOM (Document Object Model) API

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


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가지를 정의하고 있음
     - 문서에 대한 논리적 구조 => 트리 구조
     - 동적 접근 방법 => 아래 7.번항 참조
     - 동적 제어 방법 (삭제,추가,바꾸기,이벤트 처리,수정 등)


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

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

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


5. DOM 트리구조노드

  ※ ☞ DOM 트리, DOM 노드 참조


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 요소 컬렉션
  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 기초 문법
          1.   JS 변수,타입,논리식
          2.   JS 구문,연산자
          3.   JS 함수
          4.   JS 객체
          5.   JS 배열/Map/Set
          6.   JS 활용
          7.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
            2.   JS DOM 제어
              1.   1. DOM 트리 모델
                  2. DOM 트리,노드
                  3. DOM 메소드
                  4. DOM 프로퍼티
                  5. DOM 노드 접근
                  6. DOM 요소 컬렉션
            3.   JS 이벤트
            4.   Ajax
            5.   jQuery
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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