💡 DOM 큰 그림 이해하기
DOM이란 Documnet Object Model의 약자이다.
DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나
개념들에 대한 정보를 갖지 못하게 된다.
브라우저가 HTML 파일을 읽게되면 HTML 태그들을 노드로 변환하게된다.
브라우저는 이해할 수 있는 자신들만의 오브젝트(노드)로 변환하며 노드 안에서는 해당 노드의 클래스,
컨텐츠 등 모든 정보가 포함된다.
브라우저는 HTML파일을 읽으면서, 이러한 Node들을 트리 구조로 DOM Tree를 만든다.
window는 DOM, BOM, JavaScript로 이루어져 있다.!
DOM은 HTML 태그들을 브라우저가 이해하고 만들어낸 트리이다.
💡 Node의 조상 Event target
HTML 파일은 결국 Node로 변환되고, Node는 EventTarget을 상속받는다.
따라서, Node에 해당하는 Document, Element, Text 즉 HTML을 이루는 요소는 이벤트와
관련된 메서드를 사용할 수 있다.
EventTarget은 3가지 유용한 함수를 제공하는데 addEventListener,
removeEventListener, dispatchEvent가 있다.
결국 우리가 특정 요소에 이벤트를 등록할 수 있었던 것도, Node가 EventTarget을 상속받았기 때문이였다.
모든 Node들은 EventTarget을 상속받는다.
💡 CSSOM 너는 누구냐?
CSS 스타일은 브라우저가 어떻게 이해할까?
DOM 과 CSS 를 합쳐 CSSOM [CSS Object Model] 을 생성한다, 이것을 통해 브라우저는 각각의 element의 스타일 속성을 확인할 수 있다.
Render Tree 는 브라우저에 표기 되는 아이들로, DOM 과 CSSOM 을 합쳐 만든다.
단, CSSOM이 이미 DOM과 합쳐졌는데, 어째서 DOM을 다시 참조해서 Render Tree를 만들어야 하는지 의문이 생길 수 있다.
CSSOM이 만들어 질 때 각 DOM요소의 CSS 속성을 정의하기 위해 DOM을 참조하는 것이지, DOM 요소의 정보가 들어있는 건 아니기 때문에 Render Tree를 만들기 위해 다시 한번 DOM을 참조한다.
Render Tree는 브라우저에 보여지는 노드들만 가지고 있다. display:none으로 정의된 요소들이나 head부분은 트리에 포함되지 않는다.
Render Tree = DOM + CSSOM
