[Web] DOM

 

 

DOM 소개 - Web API | MDN

 

문서 객체 모델 DOM (The Document Object Model)

DOM은 HTML, xml 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경 할 수 있게 돕는다. 퓁 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

웹 페이지는 문서 중 하나로 웹 브라우저를 통해 해석되어 화면에 나타나거나 소스를 보여준다. DOM은 웹 페이지의 객체 지향 표현이며 동일한 문서를 표현하고 저장하고, 조작하는 방법을 제공한다. JavaScript와 같은 스크립트 언어를 통해 DOM을 활용할 수 있다.

 

표준 DOM 사용 예시 

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다. 예시 외에도 다양한 방식을 통해 DOM을 사용할 수 있다.

var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

 

웹 페이지를 수정, 생성하는데 사용되는 prop, method, event를 Object로 반환해준다.

 

아래는 웹 페이지, 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	root document object	DOM의 최상위 문서 객체	DOM document Reference
element	DOM API에 의해 반환된 요소	- Node interface 구현<br>- Element interface 구현	document.createElement() 등으로 생성
nodeList	elements의 배열	- index로 접근 가능<br>- 유사 배열 객체	1. list.item(1)<br>2. list[1]
attribute	특별한 인터페이스를 가진 객체 참조	- DOM에서 nodes로 취급<br>- elements보다 덜 사용됨	createAttribute() 메서드로 생성
namedNodeMap	배열과 유사한 맵	- name 또는 index로 접근<br>- 특별한 정렬 없음<br>- item 추가/삭제 가능	1. item() 메서드<br>2. index 기반 접근