DOM 문서 객체 모델

0. Web Rendering

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진(ex. V8 in Chrome)은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM Tree이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

1. 정의

넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식

좁은 의미: document 객체와 관련된 객체의 집합.

 

2. 용도

javascript에서 html 태그들을 'Object' 화하여 조작하는 것.

정적 -> 동적 문서 객체 생성이 가능해짐. (최초 javascript의 태동 원인)

 

HTML의 태그 == 문서 객체 == 노드 

 

 

 

3. 소스코드와 DOM Tree 구성도 살펴보기

 

document 객체를 통해서 h1태그 (요소 노드)와 "Juit Jitsu" (텍스트 노드) 객체를 생성했다.

다음과 같은 구성을 띤다.

h1태그가 적용된 Juit Jitsu 라는 글자는 나오지 않는다. (문서에 직접 연결되지 않은 상태)

h1과 Juit Jitsu가 Document Object에 연결되있지 않은 상태.

 

문서 객체에 h1 노드 요소와 Juist Jitsu 텍스트 요소를 연결해보자.

 

 

body 태그에 직접 입력하여 Document 노드를 생성하는 것을 "정적 객체 생성" 이런식으로 Document객체를 활용하여 생성하는 것을 "동적 객체 생성"이라한다.

h1자손에 Juit Jitsu 텍스트 노드가 붙었고 body 자손에 h1을 붙여였다!