DOM 조작 — JavaScript로 화면 바꾸기

이 토픽을 마치면

DOM이 무엇인지 이해하고, JavaScript로 HTML 요소를 찾고, 변경하고, 이벤트를 다루는 기본 방법을 알게 됩니다.

DOM이란

HTML을 브라우저가 읽으면 트리 구조로 변환합니다. 이 트리를 **DOM(Document Object Model)**이라고 합니다.

html

<div id="app">
  <h1>Hello</h1>
  <p class="intro">World</p>
</div>

이 HTML은 DOM에서 이렇게 됩니다:

text

document
  └── div#app
       ├── h1 → "Hello"
       └── p.intro → "World"

JavaScript는 이 트리의 노드를 읽고, 추가하고, 삭제하고, 변경할 수 있습니다. 그래서 화면이 바뀝니다.

요소 찾기

javascript

// ID로 찾기
const app = document.getElementById("app");

// CSS 선택자로 찾기 (첫 번째 하나)
const title = document.querySelector("h1");
const intro = document.querySelector(".intro");

// CSS 선택자로 모두 찾기
const allParagraphs = document.querySelectorAll("p");

querySelector가 가장 범용적입니다. CSS 선택자를 그대로 쓸 수 있습니다.

내용 변경

javascript

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

// 텍스트 변경
title.textContent = "안녕하세요";

// HTML 변경
title.innerHTML = "안녕<em>하세요</em>";

// 스타일 변경
title.style.color = "blue";
title.style.fontSize = "24px";

// 클래스 추가/제거
title.classList.add("active");
title.classList.remove("active");
title.classList.toggle("active");

textContent는 텍스트만, innerHTML은 HTML 태그도 포함합니다. innerHTML에 사용자 입력을 넣으면 XSS 취약점이 생길 수 있으니 주의하세요.

요소 생성과 추가

javascript

const newItem = document.createElement("li");
newItem.textContent = "새 항목";

const list = document.querySelector("ul");
list.appendChild(newItem);

createElement로 새 요소를 만들고, appendChild로 기존 요소 안에 추가합니다.

여러 요소를 한 번에 추가할 때는 DocumentFragment를 쓰면 성능이 좋습니다:

javascript

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `항목 ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment);

이벤트 처리

javascript

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log("클릭됨!");
  console.log(event.target); // 클릭된 요소
});

addEventListener로 이벤트를 등록합니다. 클릭, 입력, 스크롤 등 다양한 이벤트를 감지할 수 있습니다.

React가 있는데 왜 배우나

React, Vue 같은 프레임워크는 DOM을 직접 조작하지 않습니다. 상태를 바꾸면 프레임워크가 DOM을 자동으로 업데이트합니다.

하지만 DOM의 원리를 알아야 프레임워크가 무엇을 대신해 주는지 이해할 수 있습니다. 디버깅할 때도, 라이브러리를 통합할 때도, 성능 문제를 진단할 때도 DOM 지식이 필요합니다.

핵심

DOM은 HTML을 트리 구조로 표현한 것이며, JavaScript로 이 트리를 조작해서 화면을 바꿉니다. querySelector로 요소를 찾고, addEventListener로 이벤트를 처리합니다. React 같은 프레임워크도 내부적으로 DOM을 조작합니다.