[J] JavaScript & jQuery 공부하기 #19

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

24. DOM

 * DOM(Document Object Model)
  - 브라우저 HTML 문서에 접근할 수 있게 정의된 문서 객체 모델
  - 동적으로 문서의 내용, 구조, 스타일에 접근하는 방법을 정의한 API
  - DOM은 스크립트나 프로그래밍 언어들을 통해
    웹 페이지를 다룰 수 있게 연결시켜주는 역할을 한다
  - DOM은 문서를 나뭇가지형 구조로 표시함
    html, head, body 가 부모/자식 관계로 이루어져 있음
  - DOM은 프로그래밍 언어와 독립적임

 * DOM 관련 주요 용어
  - 태그(Tag) : HTML 페이지 내에 존재하는 구성요소
    > p 태그, table 태그, div 태그 등
  - 문서 객체(Document Object) : 태그를 Javascript에서 이용 할 수 있는 객체로 만드는 것
  - 노드 (Node) : DOM 트리에서 각각의 요소들
    > 예 : 요소 노드(Element Node), 텍스트 노드(Text Node)

  * DOM 관련 용어
   - 문서 객체를 정적으로 생성 : HTML 페이지에 있는 태그들을 그대로 읽어
                                 문서 객체를 생성
   - 문서 객체를 동적으로 생성 : JavaScript를 통해서 HTML 페이지에 없던
                                 문서 객체를 생성

  * 예제
  < script type="text/javascript">
    function newWindow(){
      var newWindow = window.open("", "MsgWindow", "width=200, height=100");
      newWindow.document.write("

새로운 창에 텍스트 출력

")
    }
  </ script>
  < body>
    < button type="button" onClick="newWindow()">새 창에 텍스트 출력
  </ body>