DOM 이란?

DOM은 Document Object Model의 약자이다.

그럼 이 말은 무엇일까.

HTML을 Javascript 엔진이 조작할 수 있게 도와주는 인터페이스이다.

즉, DOM은 브라우저의 렌더링 엔진에 의해 생성된다.
HTML이 DOM으로 생성된다.

출처

이러한 그림을 많이 볼 수 있다.

브라우저의 렌더링 과정이다.

브라우저의 렌더링 엔진에 의해 HTML은 DOM의 형식으로 변환되어 자바스크립트 엔진(해석기)가 DOM에 접근하여 수정할 수 있다.

window.document를 찍으면 나오는 것이 DOM이다.
우리가 바닐라 자바스크립트를 사용해 개발하다보면
document.createElement() 이런식의 메소드를 사용하는 것도 결국
DOM을 직접 수정하는 과정을 거치는 것이다.

그럼 우리는 브라우저의 렌더링 과정에서 왜 DOM이 계속 수정되는 상황(Javascript 엔진에 의해)이
좋지 않은지 확인할 수 있다.

이미 그려진 DOM 위에 Javascript로 다시 그리게 되면 렌더트리를 다시 그리게 되고 Layout(Reflow)과 Paint(Repaint)의 과정을 다시 거치게 된다.

정리하자면 DOM은

HTML 마크업언어를 Javascript로 수정할 수 있도록 한다.

DOM을 통해 할 수 있는건?

eventListener나, 하위 노드를 추가하거나 내부 text를 바뀌는등에 대한 작업을 할 수 있다.

DOM은 왜 계층적으로?

노드 간의 관계를 명확히 정의할 수 있고, Event 처리에 유리한 구조이다.
특히 Event Bubbling, Event Capturing등을 활용할 수 있다.