DOM이 뭐야 — 웹페이지를 나무 구조로 본 설계도

DOM은 브라우저가 HTML 문서를 나무(트리) 구조로 정리해둔 것으로, 자바스크립트는 이 구조를 통해 화면을 바꿉니다.
2026년 7월 기준으로, AI에게 코딩을 맡기다 보면 "DOM을 조작한다"는 말과 자주 마주칩니다.
이 글을 읽으면 웹페이지 화면이 어떻게 바뀌는지, 그 원리 한 가지를 확실히 잡을 수 있습니다.

DOM은 브라우저가 HTML을 나무 구조로 해석해둔 것입니다. 자바스크립트는 이 나무에서 원하는 부분을 찾아 내용이나 색을 바꾸고, 그 순간 화면이 바뀝니다.

화면은 대체 어떻게 바뀌는 걸까

웹페이지에서 버튼을 누르면 글자가 바뀌거나 새 항목이 나타납니다.
페이지를 새로 불러온 것도 아닌데 화면 일부가 달라집니다.
이렇게 "부분만 바뀌는" 일의 한가운데에 DOM이 있습니다.
브라우저는 HTML 파일을 읽고 나서 그걸 곧바로 화면에만 그리지 않습니다.
먼저 내부에 조작하기 편한 구조로 한 번 정리해둡니다.
그 정리된 구조가 바로 DOM이고, 자바스크립트는 이 구조를 만져서 화면을 바꿉니다.

DOM이 뭐야, 나무와 조직도로 이해하기

DOM은 Document Object Model의 줄임말로, 브라우저가 HTML 문서를 나무 구조로 표현한 것입니다.
여기서 "나무"라는 말이 핵심입니다.
HTML은 큰 상자 안에 작은 상자가 들어가는 방식으로 되어 있습니다.
가장 바깥에 문서 전체가 있고, 그 안에 본문이 있고, 본문 안에 제목과 문단이 있습니다.
이렇게 큰 가지에서 작은 가지로 뻗어나가는 모양이 나무를 닮았습니다.
회사 조직도를 떠올려도 좋습니다. 맨 위에 대표가 있고 아래로 부서와 팀원이 갈라지는 그림입니다.
브라우저는 우리가 쓴 HTML을 읽어서, 이런 조직도 같은 나무 구조로 다시 정리합니다.
그 나무의 가지 하나하나를 "요소(element)"라고 부릅니다.

HTML과 DOM은 비슷해 보이지만 역할이 다릅니다.
둘의 차이를 표로 정리하면 이렇습니다.

정체	사람이 쓴 문서(글자로 된 설계도)	브라우저가 만든 나무 구조(조작 가능한 실물)
형태	그냥 텍스트 파일	메모리 안의 객체 트리
바뀌는가	저장된 그대로 고정	자바스크립트가 실시간으로 수정 가능

쉽게 말해 HTML은 건축 도면이고, DOM은 그 도면대로 지어져 손댈 수 있는 실제 건물입니다.
도면은 종이라 못 바꾸지만, 지어진 건물은 벽 색을 다시 칠할 수 있는 셈입니다.

자바스크립트가 이 나무를 만진다

DOM이 나무 구조라면, 자바스크립트는 그 나무를 돌보는 정원사에 가깝습니다.
정원사가 하는 일은 크게 두 가지입니다.
첫째, 나무에서 원하는 가지를 찾습니다.
예를 들어 "제목이라는 이름표가 붙은 요소"를 골라냅니다.
둘째, 그 가지의 내용이나 모습을 바꿉니다.
글자를 다른 글자로 갈아 끼우거나, 색을 빨강으로 바꾸거나, 아예 새 가지를 붙입니다.
이 과정을 코드로 보면 대략 이런 모습입니다.

// 화면에서 제목 요소를 찾는다
const title = document.querySelector("#title");

// 찾은 요소의 글자를 바꾼다
title.textContent = "바뀐 제목";

여기서 document가 바로 DOM 나무의 뿌리입니다.
querySelector는 그 나무에서 원하는 가지를 찾아오는 명령입니다.
textContent를 새 값으로 바꾸는 순간, 화면의 제목 글자도 함께 바뀝니다.

---

버튼을 누르면 글자가 바뀌는 게 왜 DOM일까

가장 흔한 예가 좋아요 버튼입니다.
버튼을 누르면 숫자가 10에서 11로 바뀝니다.
이때 페이지는 새로고침되지 않습니다.
자바스크립트가 DOM에서 숫자가 적힌 요소를 찾아, 그 안의 값만 11로 바꿔치기했기 때문입니다.
다크 모드 버튼도 마찬가지입니다.
버튼을 누르면 배경이 검게 변하는데, 이건 자바스크립트가 DOM 요소들의 색 설정을 한꺼번에 바꾼 결과입니다.
장바구니에 담기, 댓글 실시간 추가, 입력창 경고 문구 표시도 전부 같은 원리입니다.
화면이 부분적으로 살아 움직이는 곳이라면, 그 뒤에는 거의 항상 DOM 조작이 있습니다.

AI가 "DOM을 조작한다"고 할 때

AI에게 웹 화면 기능을 만들어 달라고 하면, 설명에 "DOM을 조작한다"는 말이 자주 나옵니다.
이제 이 문장의 뜻이 보입니다.
AI가 짠 코드가 브라우저의 나무 구조에서 특정 요소를 찾아, 내용이나 색을 바꾼다는 뜻입니다.
그 결과가 곧 화면 변화로 나타납니다.
개인적으로는, 이 개념 하나만 잡아둬도 AI가 준 프론트엔드 코드가 훨씬 덜 무섭게 느껴진다고 봅니다.
코드 대부분이 결국 "나무에서 가지 찾기 → 그 가지 바꾸기"의 반복이기 때문입니다.
DOM은 프론트엔드(사용자가 보는 화면 쪽)를 이해하는 첫 단추라, 프론트와 백엔드가 뭔지부터 잡고 오면 그림이 더 선명해집니다.

자주 묻는 질문

DOM과 HTML은 같은 건가요?

아닙니다. HTML은 사람이 글자로 쓴 문서이고, DOM은 브라우저가 그 문서를 읽어 만든 나무 구조입니다.
HTML은 고정된 도면, DOM은 자바스크립트가 실시간으로 고칠 수 있는 실물이라고 보면 됩니다.

DOM을 직접 공부해야 하나요?

비개발자라면 "화면이 바뀌는 통로"라는 개념만 알아도 충분합니다.
다만 자바스크립트를 조금이라도 다룰 계획이라면, 요소를 찾고 바꾸는 기본 명령 몇 개는 익혀두는 게 도움이 됩니다.
 
 

참고한 자료

DOM의 정의와 구조는 MDN 한국어 문서를 기준으로 정리했으며, 브라우저별 세부 동작은 발행 전 공식 문서 확인이 필요합니다.