웹 페이지를 움직이는 DOM 조작

2026-04-04Views 23약 8분

웹 페이지는 가만히 있는 종이 문서가 아닙니다. 버튼을 누르면 글자가 바뀌고, 목록이 늘어나고, 색이 달라지죠. 이 변화의 중심에는 DOM이 있습니다. DOM은 브라우저가 HTML 문서를 읽고, 자바스크립트가 다룰 수 있게 만든 문서의 객체 구조입니다. 쉽게 말해, 자바스크립트가 화면과 대화하기 위한 창구라고 생각하면 됩니다.¹²

이 장에서는 자바스크립트가 화면을 어떻게 바꾸는지 아주 기초부터 살펴보겠습니다. document, querySelector, textContent, classList, createElement를 익히고 나면, "아, 웹 페이지가 이렇게 살아 움직이는구나!" 하는 감각이 생길 것입니다.

DOM이란 무엇일까

브라우저는 HTML을 그대로 덩어리째 바라보지 않습니다. 대신 요소들을 나무처럼 연결된 구조로 이해합니다. 이를 트리 구조라고 부릅니다. 예를 들어 body 안에 h1, p, button이 있다면, body가 부모이고 그 안의 요소들이 자식이 됩니다.¹²

예를 들어 이런 HTML이 있다고 해봅시다.

<body>
  <h1>안녕하세요</h1>
  <p>오늘도 자바스크립트를 공부합니다.</p>
</body>

브라우저는 이것을 단순한 글자가 아니라 "제목 요소 하나", "문단 요소 하나"처럼 이해합니다. 그래서 자바스크립트는 특정 요소를 찾아서 내용을 바꾸거나, 새 요소를 추가하거나, 스타일용 클래스를 붙일 수 있습니다.

브라우저 화면과 DOM 트리의 관계를 보여 주는 개념 일러스트

여기서 가장 자주 만나게 되는 출발점이 바로 document입니다.

document는 무엇인가

document는 현재 웹 페이지 전체를 나타내는 객체입니다. 자바스크립트는 보통 여기서부터 출발합니다. "문서 안에서 어떤 요소를 찾아 줘", "새 요소를 만들어 줘", "이 요소를 추가해 줘" 같은 부탁을 document에게 하는 셈입니다.²

예를 들어 아래 코드는 문서에서 제목을 찾습니다.

const title = document.querySelector("h1");

이 한 줄은 이런 뜻입니다.

"현재 문서에서 h1 요소 하나를 찾아서 title 변수에 저장해 둬."

이제 title을 통해 실제 화면의 제목을 바꿀 수 있습니다.

요소를 선택하는 첫걸음: querySelector

DOM 조작은 거의 항상 선택부터 시작합니다. 바꾸려는 대상이 있어야 바꿀 수 있으니까요.

가장 많이 쓰는 방법은 querySelector()입니다. 이 메서드는 CSS 선택자 방식으로 요소를 찾습니다. 그리고 조건에 맞는 첫 번째 요소 하나만 돌려줍니다.³

다음 HTML을 보겠습니다.

<h1 id="main-title">자바스크립트 DOM</h1>
<p class="desc">화면을 바꾸는 연습</p>

이 요소들은 이렇게 선택할 수 있습니다.

const title = document.querySelector("h1");
const mainTitle = document.querySelector("#main-title");
const desc = document.querySelector(".desc");

각 선택자는 이런 의미입니다.

"h1" → 첫 번째 h1 요소
"#main-title" → id가 main-title인 요소
".desc" → class가 desc인 요소

초보자에게는 querySelector()가 특히 편합니다. HTML과 CSS에서 쓰던 선택자 문법을 거의 그대로 사용할 수 있기 때문입니다.³

화면의 글자를 바꾸는 textContent

요소를 찾았다면, 이제 내용을 바꿔 볼 차례입니다. 가장 안전하고 이해하기 쉬운 속성은 textContent입니다. 이름 그대로 텍스트 내용을 읽거나 바꿉니다.⁴

<h1 id="title">안녕하세요</h1>

const title = document.querySelector("#title");
title.textContent = "반갑습니다!";

그러면 화면의 제목은 안녕하세요에서 반갑습니다!로 바뀝니다.

이때 textContent는 글자만 바꾼다는 점이 중요합니다. HTML 태그를 해석하지 않고 문자 그대로 다룹니다.⁴

예를 들어:

title.textContent = "<strong>굵은 글자</strong>";

이 코드는 굵은 글자로 보이지 않습니다. 화면에는 <strong>굵은 글자</strong>라는 글자 자체가 나타납니다.

이 점이 오히려 초보자에게는 장점입니다. 실수로 HTML 구조를 깨뜨릴 일이 적기 때문입니다. 그래서 단순히 문구를 바꿀 때는 textContent를 먼저 떠올리면 좋습니다.

textContent와 innerHTML은 어떻게 다를까

DOM을 배우다 보면 innerHTML도 자주 보입니다. 둘 다 내용을 바꾸지만 성격이 다릅니다.⁴

const box = document.querySelector("#box");
box.textContent = "안녕하세요";
box.innerHTML = "<strong>안녕하세요</strong>";

첫 번째는 텍스트만 넣고, 두 번째는 HTML 태그까지 해석합니다.

초보자 기준으로는 이렇게 기억하면 충분합니다.

단순히 글자만 바꿀 때는 textContent
HTML 조각까지 넣고 싶을 때는 innerHTML
처음에는 textContent를 더 자주 쓰는 편이 안전함

이 장의 목표는 DOM의 기초 감각을 익히는 것이므로, 이후 예제에서는 textContent를 중심으로 설명하겠습니다.

클래스를 붙이고 떼는 classList

웹 페이지의 모양은 보통 CSS가 담당합니다. 자바스크립트는 CSS를 직접 길게 쓰기보다, 클래스를 추가하거나 제거해서 화면 상태를 바꾸는 경우가 많습니다. 이때 사용하는 것이 classList입니다.⁵⁶

예제를 봅시다.

<p id="message">오늘의 상태: 보통</p>

.highlight {
  color: tomato;
  font-weight: bold;
}

const message = document.querySelector("#message");
message.classList.add("highlight");

이제 문단은 빨갛고 굵게 보입니다. 자바스크립트가 직접 색을 칠한 것이 아니라, highlight라는 CSS 클래스를 붙여 준 것입니다.

classList에서 자주 쓰는 메서드는 다음과 같습니다.

add() : 클래스 추가
remove() : 클래스 제거
toggle() : 있으면 제거, 없으면 추가

예를 들어:

message.classList.add("highlight");
message.classList.remove("highlight");
message.classList.toggle("highlight");

toggle()은 특히 재밌습니다. 스위치처럼 켰다 껐다 할 수 있기 때문입니다. 메뉴 열기/닫기, 다크 모드, 강조 표시 같은 기능에 자주 쓰입니다.⁵⁶

HTML을 읽고 바꾸는 첫 번째 실습

이제 선택과 변경을 한 번에 해봅시다.

<body>
  <h1 id="title">오늘의 할 일</h1>
  <p class="status">아직 시작 전</p>

  <script>
    const title = document.querySelector("#title");
    const status = document.querySelector(".status");

    title.textContent = "오늘의 할 일 목록";
    status.textContent = "DOM 조작 공부 시작!";
  </script>
</body>

이 코드의 흐름은 아주 단순합니다.

먼저 document.querySelector()로 제목과 문단을 찾습니다. 그리고 textContent로 글자를 바꿉니다. 브라우저는 그 변화를 바로 화면에 반영합니다. 이것이 DOM 조작의 가장 기본적인 모습입니다.

작지만 꽤 놀랍습니다. HTML 파일을 직접 다시 쓰지 않아도, 자바스크립트가 실행되면서 화면이 바뀌기 때문입니다.

새 요소를 만드는 createElement

기존 요소를 바꾸는 것만으로는 부족할 때가 많습니다. 할 일 항목을 새로 추가하거나, 알림 문구를 만들어 붙이고 싶을 수도 있죠. 이럴 때 document.createElement()를 사용합니다.⁷

이 메서드는 새로운 HTML 요소를 만들기만 합니다. 아직 화면에는 보이지 않습니다. 메모리 안에 새 요소를 준비해 둔 상태라고 생각하면 됩니다.⁷

const newItem = document.createElement("li");

이제 li 요소가 하나 만들어졌습니다. 하지만 화면에는 안 보입니다. 왜냐하면 아직 문서 어딘가에 붙이지 않았기 때문입니다.

그래서 보통 다음 단계가 이어집니다.

newItem.textContent = "자바스크립트 복습하기";

이렇게 텍스트를 넣고,

document.body.appendChild(newItem);

문서에 붙여 줍니다. 그제야 화면에 나타납니다.²⁷

appendChild로 화면에 붙이기

appendChild()는 말 그대로 자식 요소로 덧붙이는 메서드입니다. 부모 요소의 마지막 자식으로 추가됩니다.²⁷

예를 들어 HTML이 이렇게 있다면:

<ul id="todo-list">
  <li>HTML 복습</li>
</ul>

자바스크립트로 새 항목을 추가할 수 있습니다.

const todoList = document.querySelector("#todo-list");
const newItem = document.createElement("li");

newItem.textContent = "DOM 조작 연습";
todoList.appendChild(newItem);

실행 후 화면은 이렇게 됩니다.

<ul id="todo-list">
  <li>HTML 복습</li>
  <li>DOM 조작 연습</li>
</ul>

이 흐름은 DOM 조작의 핵심 패턴입니다.

부모 요소를 선택한다.
새 요소를 만든다.
내용을 채운다.
부모에게 붙인다.

이 네 단계만 익혀도 간단한 목록, 카드, 알림 문구 정도는 직접 만들 수 있습니다.

작은 예제: 공지 문구 만들기

이번에는 조금 더 완성된 예제를 보겠습니다.

<body>
  <div id="notice-box"></div>

  <script>
    const noticeBox = document.querySelector("#notice-box");
    const notice = document.createElement("p");

    notice.textContent = "환영합니다! 오늘도 한 걸음 성장해 봅시다.";
    notice.classList.add("notice");

    noticeBox.appendChild(notice);
  </script>
</body>

.notice {
  padding: 12px;
  background-color: #fff4cc;
  border: 1px solid #f2d57e;
}

이 코드는 새 문단을 하나 만들고, 문구를 넣고, 클래스를 붙인 뒤, #notice-box 안에 추가합니다.

중요한 포인트는 자바스크립트가 혼자서 모든 걸 해결하지 않는다는 점입니다. 구조는 HTML, 모양은 CSS, 변화는 JavaScript가 맡습니다. 셋이 팀플레이를 하는 셈입니다.

여러 요소를 한꺼번에 고를 때

querySelector()는 첫 번째 요소 하나만 선택합니다. 만약 같은 클래스가 붙은 요소 여러 개를 모두 다루고 싶다면 querySelectorAll()을 사용합니다. 그러면 여러 요소가 들어 있는 목록 비슷한 값이 반환됩니다.³⁸

<p class="item">사과</p>
<p class="item">바나나</p>
<p class="item">망고</p>

const items = document.querySelectorAll(".item");

items.forEach(function (item) {
  item.classList.add("highlight");
});

여기서 중요한 점이 하나 있습니다. querySelectorAll()의 결과는 요소 하나가 아니라 여러 요소의 묶음입니다. 그래서 바로 classList.add()를 붙일 수는 없고, 하나씩 꺼내서 처리해야 합니다.⁸

초보자가 자주 하는 실수 중 하나가 바로 이 부분입니다.

자주 하는 실수

DOM 조작은 재밌지만, 처음에는 사소한 실수가 잦습니다. 몇 가지만 미리 알고 있으면 훨씬 덜 헤맵니다.

요소를 찾지 못했는데 바로 사용하기

const title = document.querySelector("#title");
title.textContent = "새 제목";

이 코드는 #title이 실제로 있을 때만 잘 동작합니다. 만약 HTML에 그런 요소가 없다면 title은 null이 되고, 그 뒤 코드에서 에러가 납니다.³

그래서 처음에는 이렇게 점검하는 습관이 좋습니다.

const title = document.querySelector("#title");

if (title) {
  title.textContent = "새 제목";
}

스크립트가 너무 일찍 실행되기

HTML이 아직 다 읽히기 전에 자바스크립트가 먼저 실행되면, 찾으려는 요소가 아직 없을 수 있습니다. 그래서 입문 단계에서는 <script>를 보통 </body> 바로 앞에 두는 방법이 이해하기 쉽습니다.²

<body>
  <h1 id="title">제목</h1>

  <script src="script.js"></script>
</body>

이렇게 하면 HTML이 먼저 준비되고, 그다음 자바스크립트가 실행됩니다.

textContent와 innerHTML을 헷갈리기

굵은 글자를 만들고 싶은데 textContent를 썼다면 태그가 그냥 문자로 보일 수 있습니다. 반대로 단순한 글자만 바꾸면 되는데 innerHTML만 계속 쓰면 필요 이상으로 복잡해질 수 있습니다. 처음에는 "글자면 textContent"라고 기억해 두면 꽤 도움이 됩니다.⁴

한 번에 정리하는 DOM 조작의 흐름

이 장에서 배운 내용을 하나의 예제로 모아 보겠습니다.

<body>
  <h1 id="title">나의 공부 목록</h1>
  <ul id="list">
    <li>변수 복습</li>
  </ul>

  <script>
    const title = document.querySelector("#title");
    const list = document.querySelector("#list");

    title.textContent = "나의 자바스크립트 공부 목록";
    title.classList.add("highlight");

    const newItem = document.createElement("li");
    newItem.textContent = "DOM 조작 연습";

    list.appendChild(newItem);
  </script>
</body>

이 예제 안에는 지금까지 배운 핵심이 거의 다 들어 있습니다.

document로 문서에 접근하고, querySelector()로 요소를 찾고, textContent로 글자를 바꾸고, classList.add()로 클래스를 추가하고, createElement()로 새 요소를 만든 뒤, appendChild()로 문서에 붙였습니다.