DOM(Document object model)

참고사이트

DOM(Document Object Model)

문서 객체 모델(DOM)은 HTML,XML 문서의 프로그래밍 인터페이스이다.
문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

즉, DOM은 구조화된 Nodes와 Property와 method를 갖고 있는 objects로 문서를 표현하며 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)이다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용해 이처럼 다른 형태로 나타날 수 있다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. 또 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적은 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

DOM과 자바스크립트

웹페이지를 만드는데 자바스크립트로 작성되지만 문서(document)와 문서의 요소(element)에 접근하기 위해서는 DOM이 사용된다. DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립터 언어는 웹 페이지 또는 XML페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못한다. 문서의 모든 element(전체문서,헤드,문서 안의 table, table header, table cell안의 text)는 문서를 위한 document object model의 한 부분이다. 때문에, 이러한 요소들을 DOM과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

초창기 자바스크립트와 DOM은 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전했다. 페이지 콘텐츠는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.
API(web or XML page) = DOM + JS(scripting language)

DOM은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API를 통해 이용가능하다. 그렇기 때문에 자바스크립트 뿐만아니라 어떠한 언어에도 사용 가능하다.
다음은 파이썬을 사용한 예제이다.

DOM 접근방법

DOM을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신의 방법으로 DOM을 구현하며, 이로인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생했다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느정도의 DOM을 항상 사용한다.

스크립트를 작성할때, 즉 인라인 < script > 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여 문서 자체를 조작하거나 문서의 children을 얻기위해 document 또는 window elements를 위한 API를 즉시 사용할 수 있다. DOM 프로그래밍은 때에 따라 매우 간단 할 수 도 있고 문단을 작성하는 복잡한 DOM이 될 수도 있다.

DATA TYPES

Nodes = elements
Nodes의 arryas = nodeList(또는 elements)
attribute nodes = attributes

• document
• element
• nodeList
  : index를 통해 접근 가능

1. list.item(1) 2. list[1]

• attribue
• namedNodeMap
  : array와 유사하지만 name과 index로 접근가능하다.

Interfaces 와 Objects

많은 객체는 여러개의 다른 interfaces와 연관되어 있다.
예를들어, table object는 createCaption, insertRow 메소드들이 포함된 HTMLTableElement을 구현한 것이다. table 객체는 HTML 객체이기도 하기 때문에, table은 Element interface도 구현한다.

HTML element는 DOM이 연관되어 있는 한 nodes 트리 중 하나의 node 이다.
nodes트리 = 웹페이지 or XML 페이지를 위한 object model
table element는 보다 기본적인 Element에서 파생된 Node interface를 구현한다.

DOM Object

• DOM Document
  문서를 제어하기 위한 API , 문서전체

• DOM Events
  엘리먼트가 공통적으로 가지고 있는 이벤트

• DOM Elements
  엘리먼트가 공통적으로 가지고 있는 API

그 외에 위의 Dom Events, Elements의 API외에 엘리먼트의 특성에 따라 추가되는 API 리스트가 있다.

모든 엘리먼트는 그 엘리먼트에 적합한 객체를 갖게 된다. 그 객체를 통해 자바스크립트로 엘리먼트를 동적으로 제어할 수 있다.

핵심 Interfaces

Document 객체와 window 객체는 DOM 프로그래밍에서 가장 자주 사용한다.
간단하게, window 객체는 브라우저와 같고, document 객체는 root document 자체라고 할 수 있다.

• document.getElementById(id)
  id가 일치하는 요소들을 리턴함
• document.getElementsByTagName(name)
  : 태그 이름으로 문서의 요소들을 리턴함
• document.getElementsByName
• document.getElementsByClassName
  클래스가 일치하는 요소들을 리턴함
• querySelector
  셀렉터(들)과 일치하는 요소 리턴함
• querySelectorAll
  셀렉터(들)과 일치하는 모든 요소들을 리턴함
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute
• element.getAttribute
• element.addEventListener
• window.content
• window.onload
• window.dump
• window.scrollTo