쉬운 설명
사용자가 보는 웹 페이지는 사실 두 단계로 존재합니다. 서버에서 받은 HTML 텍스트, 그리고 브라우저가 그 텍스트를 해석해 만든 트리 — 이 트리가 DOM입니다. <div> 안에 <p>가 있고 그 안에 <span>이 있는 구조가 트리의 가지처럼 표현됩니다.
DOM이 필요한 이유는 두 가지입니다. ① 사용자가 어디를 누르는지·어떤 키를 눌렀는지 같은 이벤트를 구조적으로 잡기 위해. ② 자바스크립트가 화면을 부분적으로 바꿀 수 있게 하기 위해. 우리가 '좋아요'를 누르면 카운터가 즉시 1 올라가는 것도, 모달이 떴다 사라지는 것도 — 모두 자바스크립트가 DOM 트리의 한 노드를 바꿔 일어나는 일입니다.
자바스크립트가 'document.querySelector(...)'로 어떤 요소를 찾는다는 건 이 트리에서 노드를 찾는 일이고, 'element.textContent = ...'로 글을 바꾸면 트리가 갱신되고 브라우저가 그 변화를 화면에 다시 그립니다. 노드를 새로 만들거나 지우는 일도 같은 트리 위에서 일어납니다.
DOM은 강력하지만 직접 다루기가 까다롭습니다. 페이지가 복잡해질수록 '어느 노드를 언제 어떻게 바꿀지'를 사람이 다 추적하기 어렵습니다. 그래서 React·Vue·Svelte 같은 프레임워크가 등장했습니다. 이들은 '지금 상태가 이러면 DOM이 이렇게 생겨야 한다'를 선언하면, 프레임워크가 차이를 계산해 DOM을 자동으로 갱신합니다.
초보자가 헷갈리는 점: DOM은 HTML 원문이 아닙니다. 브라우저가 만든 메모리상의 표현이고, 자바스크립트가 바꾸는 건 DOM뿐이라 페이지를 새로고침하면 다시 원본 HTML에서 시작합니다. 또 DOM 조작이 느리다는 말은 정확히는 '레이아웃·페인트가 다시 일어나는 게 비싸다'는 뜻이고, 그래서 가상 DOM·키 관리 같은 최적화 기법이 나왔습니다.
비유로 보면
DOM은 음악 악보를 펴 놓고 한 줄씩 고쳐 가며 즉시 연주하는 모습과 비슷합니다. 종이 악보(HTML 원문)는 그대로지만, 우리가 보는 연주(화면)는 매번의 즉석 수정(DOM 변경)에 따라 달라집니다. 새로고침하면 종이 악보에서 다시 시작합니다.
어디에서 만나나
모든 동적인 웹 페이지의 기반. 단순한 광고 배너부터 노션·피그마 같은 복잡한 SPA까지, 화면 위에서 일어나는 모든 변화는 결국 DOM 변경의 합입니다. 모바일 앱(웹뷰)·전자책 리더·일부 게임 UI에도 같은 모델이 들어가 있습니다.
작은 예시
이메일 앱에서 안 읽은 메일을 클릭하면 굵은 글씨가 일반 글씨로 바뀌고, 받은편지함의 '안 읽음 (3)' 카운터가 즉시 (2)로 줄어듭니다. 이 모든 변화는 자바스크립트가 DOM의 해당 노드 속성을 바꿔서 일어나는 일입니다.
자주 하는 오해
한 줄 정리
DOM은 브라우저의 '살아 있는 화면 표현'입니다. 그 트리를 누가, 언제, 얼마나 다듬는가에 따라 사용자가 느끼는 부드러움이 결정됩니다.