DOM(Document Object Model) 이란?

 

 

Document Object Model, DOM : 문서 객체 모델

 

브라우저는 HTML코드를 DOM은 객체형태 모델로서 HTML Element를 트리 구조(DOM Tree)로 저장하며, 특정 엘리먼트를 찾거나 조작하는 것을 쉽게 도와주는 메서드(다양한 DOM API)를 제공한다.

 

DOM은 HTML, XML 문서의 프로그래밍 인터페이스이다.

동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

 

웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects로 구성된다. 예를 들어 document object는 document 자체를 의미하며, table object는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다.

 

 

 

objects와 types

 

API에는 우리가 반드시 알고 있어야 할 수많은 data types이 있는데 그 중에서도 중요한 데이터 타입들을 알아보자. (아래 내용 중 nodes는 elements로, 노드의 arrays는 nodeLists(또는 elements), attribute 노드들은 attributes로 표현한다.)

 

document	member가 document type의 object를 리턴할 때 (예를 들어 element의 ownerDocument property는 그것이 속해 있는 document를 리턴한다. ) 이 object는 root document object 그 자체이다. (document object 에 대한 설명 : DOM document Reference)
element	element는 DOM API의 member에 의해 리턴된 element 또는 element type의 node를 의미한다. document.createElement() 메서드가 node를 참조하는 object를 리턴한다고 말하는 대신,  메서드가 DOM 안에서 생생되는 element를 리턴한다고 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface를 구현한 것이다.
nodeList	nodeList는 elements의 배열이다. nodeList의 Items은 index를 통해 접근 가능하며, 다음과 같이 두 가지의 동일한 방식이 있다.  -  list.item(1)  :  item() 메서드는 nodeList object의 단일 메서드이다.  -  list[1]  :  list에서 두번째 item을 fetch하는 전형적인 array syntax이다.
attribute	attribute가 member에 의해 리턴되는 것은 attribute에 대한 특별한 인터페이스를 노출하는 object reference다. attributes는 DOM에서 elements와 같은 nodes다. elements만큼 많이 사용되지는 않는다.
namedNodeMap	namedNodeMap는 array와 유사하지만 items은 name 또는 index에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기에 열거 할 때 index를 주로 사용한다. namedNodeMap에는 item() method가 있으며, namedNodeMap에 item을 추가하거나 삭제할 수 있다.

 

 

 

 

DOM의 핵심 Interfaces

 

Document와 window objects는 DOM 프로그래밍에서 가장 자주 사용하는 objects이다.

window object = 브라우저,  document object = root document 

 

 

아래는 웹 페이지, XML 페이지 스크립팅에서 DOM을 사용하는 공통적인 API들이다.

---

• document.getElementById(id)
• document.getElementsByTagName(name)
  
• 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

---

 

 

 

 

 

출처 

Document Object Model (DOM)