💡 DOM?

DOM (Document Object Model)

우리가 흔히 보는 웹 페이지들은 해당 페이지의 각각의 HTML **요소(Element)**들로 구성된 하나의 **문서 (Document)**를 브라우저가 분석하여 화면에 해당 페이지를 띄운 것이다.

이때, 이러한 HTML 요소들로 이루어진 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 바로 DOM이다.

DOM은 요소들을 트리(Tree) 형태로 표현하며, 각 요소에 해당하는 **노드(Node)**가 존재한다.

개발자들은 DOM이 제공하는 **API(getElementById,, querySelector)**를 이용해 이러한 DOM 구조에 접근하고, 내용이나 스타일을 변경할 수 있다. 이런 과정을 DOM 조작이라고 부른다.

폰트의 색을 바꾸는 것으로 DOM 조작의 예시로 들면,

document.querySelector(‘#title”).style.color = “red”;

• 브라우저는 HTML을 탐색해 해당 Element를 찾고, 해당 Element와 자식 Element들을 DOM에서 제거한다.
• 이후 새롭게 수정된 Element(red)로 이를 교체한다.
• 부모 및 자식 노드에 대한 CSS를 다시 계산한다.
• 마지막으로 브라우저 디스플레이에 리페인팅된다.

이렇듯 DOM을 업데이트 하는 것은 단순한 콘텐츠 변경 뿐만 아닌 CSS 재계산 같은 많은 작업들이 요구된다. 여기에서 DOM 조작에 빠른 알고리즘을 사용한다는 조건 하에선 큰 무리가 있는 작업은 아닐 수 있지만