DOM(Document Object Model)

1. window 오브젝트의 기능

window는 자바스크립트의 전역객체(global object)이며, 곧 브라우저를 의미한다.

winodw 객체에서 사용할 수 있는 기능은 다음과 같다.

 

-DOM : 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다.

-BOM : 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.(navigator, location, fetch, storage 등)

-JavaScript : 자바스크립트와 관련된 객체(array, map, date)

 

---

2. 브라우저가 HTML을 이해하는 과정

우리가 어떤 페이지의 URL을 입력하고 엔터를 치면, 브라우저는 서버에 html 파일을 요청하게 된다.

브라우저는 받아온 html 파일의 태그를 분석해서 Node로 변환하게 된다.

이것이 브라우저가 가지고 있는, 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환하는 것이다.

(메모리에 보관할 수 있는 오브젝트로 변환)

 

즉, 브라우저는 html 파일을 한 줄 씩 읽으면서

html 태그를 JavaScript를 통해 Node라는 오브젝트로 변환하고

변환된 노드들로 트리 구조를 생성하는데 그것이 DOM이라고 할 수 있다.

(DOM은 HTML을 트리 구조로 표현한다.)

 

---

3. 노드

node는 event target 오브젝트를 상속한다 = node라는 오브젝트는 곧 event target의 오브젝트이다.

즉, 모든 노드는 이벤트가 발생할 수 있다!

 

HTML 태그에는 그에 상응하는 DOM 트리 요소(node)가 있다.

노드의 종류는 굉장히 다양하다. (document, element, text...)