DOM의 정의
노드 interface인 DOM은 하나의 추상적인 클래스 기반이다.
DOM은 매우 많은 API Object에 기반되어 있다.
그러므로 오브젝트 타입들이 종종 상호작용을 가능케 하는 것이다.
실행 가능한 노드인 모든 오브젝트들은 기능적으로 하나의 서브클래스에 기반되어 있고, [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document), [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element), and [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment)
가 대표적인 예시다.
게다가 어느종류의 DOM이든지 하나의 인터페이스에 의해서 나타나지고 있고 그것은 노드를 베이스를 하고 있다. (즉, DOM은 Node를 상속하고 있다고 봐도 무방하다.)
Propertys
MDN사이트를 들어가면 알 수 있듯이 굉장히 많은 프로퍼티 즉, API들이 존재한다. 전부 익힐 필요는 없고 필요에 따라 검색 후 사용하면 될 것 같다.
무엇보다 속성들의 매소드가 노드를 기반하고 있다는 사실을 알면 좋을 것 같다.
*`[EventTarget]
interface is implemented by objects that can receive events and may have listeners for them. In other words, any target of events implements the three methods associated with this interface.
methods
[EventTarget.addEventListener()]((https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener))
Registers an event handler of a specific event type on the EventTarget.
[EventTarget.removeEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
Removes an event listener from the EventTarget.
[EventTarget.dispatchEvent()](https://www.notion.so/Javascript-ada374d27ec44b7aa1a8bef9c73f45ef)
Dispatches an event to this EventTarget.
methods
[EventTarget.addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
Registers an event handler of a specific event type on the EventTarget.
[EventTarget.removeEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
Removes an event listener from the EventTarget.
[EventTarget.dispatchEvent()](https://www.notion.so/Javascript-ada374d27ec44b7aa1a8bef9c73f45ef)
Dispatches an event to this EventTarget.
가장 흔하게 쓰이고 있던 addEventListener은 결국 노드를 기반한 DOM API 중 하나였다는 의미.
Browser와 DOM의 상관 관계?
앞의 내용은 어찌되었든 DOM은 브라우저와 연관성을 띈다는 것인데, user가 보여지기 까지 어떤 순서로 이뤄져 있을까?
순서는 간단하다,
브라우저 HTML 읽고 ⇒ Node로 변환 인식 ⇒ Node에 기반 된 인터페이스 해석 형태라고 보면 된다. (혹시 이 때문에 을 사용하는 것일까?)
(정리하진 않았지만 CSSOM(CSS + DOM) 또한 브라우저가 HTML을 먼저 읽고 DOM TREE에 따라 cascading을 실행.)
즉, 브라우저는 먼저 HTML을 읽고나서 DOM과 CSSOM의 내용을 분석해서 User에게 제공 될 요소들만 모아서 Rendering(render tree에 입력) 하는 것으로 파악할 수 있다.
Critical-rendering-path 이해 자료
https://web.dev/critical-rendering-path-render-tree-construction/
결론
자바스크립트에서 태그, 이벤트 실행 등 거의 모든 것들은 노드를 기반한 API를 상속 받고 있다는 점!, DOM을 외운다기보단 브라우저와의 상관 관계를 파악하고 필요에 따라 API를 사용하도록 하자!
그리고 렌더링 패스를 통해 어떻게 하면 성능이 좋은 경로를 만들 수 있는지를 포인트를 삼아 학습해보자
참고 자료
