주다훤 블로그

HWONDAAbout

DOM

브라우저가 HTML 문서를 자바스크립트로 조작할 수 있도록 객체 구조로 표현한 문서 객체 모델
Series•7분•2026.04.11
DOM
이전글

DOM은 브라우저가 HTML 문서를 자바스크립트로 조작할 수 있도록 객체 구조로 표현한 문서 객체 모델입니다.

문서 객체 모델(DOM)

문서 객체 모델(Document Object Model, DOM) 은 HTML 문서 구조를 자바스크립트가 제어할 수 있도록 객체로 표현한 것이다. 영어로는 주로 약어 DOM으로 표현하고, 한국어로는 돔이라고 읽는다.

DOM은 API다

엄밀히 말하면 DOM은 자바스크립트 언어 자체가 아니라, 브라우저가 문서를 탐색·조작할 수 있도록 제공하는 API다.

먼저, HTML 문서는 <body>, <div> 같은 태그로 구성되어 있다. 크롬이나 사파리 등 브라우저에는 각자의 렌더링 엔진이 있는데, 이 엔진이 HTML 문서를 파싱해 DOM 구조로 변환한다. 이렇게 하면 자바스크립트가 document.querySelector 같은 선택자를 통해 DOM 요소에 접근할 수 있게 된다.

다시 말하면, 자바스크립트가 HTML을 직접 이해하는 것이 아니라, 브라우저가 HTML 문서를 DOM이라는 객체 구조로 바꿔주고, 자바스크립트는 그걸 이용해 문서를 다루는 것이다.

DOM

HTML 파싱 중 script를 만나면

  1. 브라우저가 HTML 문서를 한 줄씩 파싱한다.
  2. 중간에 <script> 태그를 만나면, DOM 생성을 멈추고 JavaScript 파일을 실행한다.
  3. JavaScript 파일을 실행한 후, 다시 DOM 생성을 계속한다.

이렇게 브라우저가 동기적으로 HTML과 JavaScript를 처리하기 때문에 <script> 태그의 위치가 중요하다.

<script>가 상단에 있으면 DOM 생성이 느려지거나, JavaScript가 아직 생성되지 않은 DOM 요소에 접근하려 할 수 있다. 따라서 바닐라 자바스크립트에서는 <script>는 가능한 HTML 문서 하단에 위치하거나, defer 속성을 사용하여 비동기적으로 실행하는 것이 좋다.

DOM 트리

DOM의 중요한 특징 중 하나는 트리(Tree) 자료 구조라는 점이다. 트리 자료 구조는 하나의 최상위 노드에서 시작해 다른 노드들이 뻗어나가는 구조를 말한다.

DOM은 document라는 최상위 노드를 가지며, 이 노드 아래에 다른 노드들이 뻗어나가는 구조를 가진다.

DOM node 이미지 출처

DOM 트리 구성

참고1. document

브라우저는 웹 문서를 제어할 수 있도록 여러 객체를 제공하는데,
그중에서 DOM에 접근할 때 가장 중요한 객체가 바로 document다.

document 객체는 웹 페이지 전체를 의미하고, DOM 요소에 접근하기 위한 진입점 역할을 한다.

쉽게 말하면, 우리가 DOM을 다룰 때는 대부분 document에서 시작한다고 보면 된다.

document

이렇게 console에서 document를 출력해보면, 웹 페이지 전체를 나타내는 Document 객체가 나온다. 이는 개별 HTML 요소(Element)와는 다른, DOM에 접근하기 위한 진입점이다.

그럼 해당 객체의 하위 노드에 접근하려면 어떻게 해야 할까?

이론적으로는 하위 노드를 하나씩 따라 내려가면서 접근할 수도 있다.

node-access
document.childNodes

이런 식으로 최상위 노드에서 시작해서, 그 아래의 html, body, h1 같은 요소를 순서대로 찾아갈 수 있다.

그리고 특정 노드에 도달한 다음에는 textContent 같은 프로퍼티를 사용해서 내용을 바꿀 수도 있다.

childNodes

하지만 이렇게 노드를 하나하나 타고 들어가는 방식은 너무 번거롭다. 그래서 자바스크립트에서는 더 편리한 방법을 제공한다.

querySelector
const title = document.querySelector('h1');
title.textContent = '제목없음';

이렇게 하면 CSS 선택자를 이용해서 원하는 요소에 훨씬 쉽게 접근할 수 있다.

즉,

document로 DOM에 진입하고 querySelector()로 원하는 요소를 찾고 그 요소의 프로퍼티나 메서드로 내용을 바꾸는 것

이게 우리가 흔히 하는 DOM 조작이다.

참고2. 부가 설명

선택자(Selector)

요소 조작(Property)

이 외에도 DOM API는 많은 기능을 제공하고 있다.

자세한 내용: MDN DOM API