DOM이란?

Programming/JavaScript 2015. 2. 28. 21:19

DOM (DOCUMENT OBJECT MODEL) 

 

문서에 존재하는 객체들의 모형을 말한다. 

문서에 있는 객체들의 구조 모형이라고도 한다. 

  

1. DOM이란?

 

프로그램이나 스크립트가 웹 문서의 내용, 구조, 스타일에 관한 정보에 접근하거나 갱신하기 위해 사용하는 인터페이스

- HTML, XML과 같은 마크업 언어의 문서 구조와 이들 문서의 일부분을 변결할 수 있는 수단의 표준

 

대부분의 브러우저에서 동일한 효과와 기능제공 → 크로스브라우징

[참고] ECMA  Script에서 나온 언어, dom 관련 내용이 없는 책은 예전 구버전 책이라고 보면 된다.

 

2. DOM Script

 

- DOM 다루는 프로그래밍 기법

- 일반적으로 자바스크립트를 의미

 

3. DOM의 구조

 

- 문서를 tree구조로 표시 (아래 그림을 보면 가지가 계속 늘어난다.)

 

- 노드 : 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시하는것

(그림에서 보면 html, head, body 등을 말한다. head노드는 title과 meta를 서로 연결해 주고 잇다.)

 

- 따라서 DOM구조를노드 트리라고 말합니다. (문서 document는 노드들의 집합)

 



 

body  부분에 들어가는 객체 요소들은 매 페이지들마다 다르다.

따라서 사람들이 이 객체들을 제어(생성, 변경, 삭제, 접근)하기 위해서는 DOM을 사용하는 방법을 알아야 한다.

 

내용에 따라 노드를 분류해 보면 다음과 같다.

1. 요소 노드 : 태그명 - 요소 노드는 다른 요소 포함 가능

2. 텍스트 노드 : 요소 안에 포함된 text

3. 속성 노드 : 요소에 대한 정확한 정보 표현. (항상 요소 노드 안에 포함)

ex) <p title="javascript정의">javascript</p>

p는 요소 노드, javascript는 텍스트 노드, title는 속성 노드가 됩니다.

 

이 외에 더많은 노드들이 존재 하지만 이정도만 알아도 스크립트에를 사용해서 접근할 수 있다. 

 

 +추가 설치 : DOMinspector
  사용법 : 도구>웹 개발자도구>DOMinspector

'Programming > JavaScript' 카테고리의 다른 글

DOM 속성  (0) 2015.02.28
DOM으로 문서의 요소 접근하는 방법, 메소드  (0) 2015.02.28
DOM이란?  (0) 2015.02.28
function(함수)  (0) 2015.02.28
Object(객체)  (0) 2015.02.28
String 객체  (0) 2015.02.28
Posted by _UChan

댓글을 달아 주세요