🟨 2-6. DOM 완벽 이해 — 자바스크립트로 HTML 요소를 자유자재로 조작하는 법

frontend/javascript

🟨 2-6. DOM 완벽 이해 — 자바스크립트로 HTML 요소를 자유자재로 조작하는 법

mirabo01 2025. 11. 7. 08:49

1. DOM이란 무엇인가

DOM은 Document Object Model의 약자다.
브라우저는 우리가 작성한 HTML 문서를 읽은 뒤,
그 구조를 트리(Tree) 형태의 “객체 구조”로 변환한다.

이 구조가 바로 DOM 트리(DOM Tree) 다.

HTML 예시 👇

<body>
  <div>
    <h1>안녕하세요</h1>
    <p>DOM을 배워봅시다.</p>
  </div>
</body>

브라우저 내부에서는 이렇게 구조화된다.

Document
 └── body
      └── div
           ├── h1
           └── p

즉, 자바스크립트는 이 트리를 탐색하고, 수정하고, 추가하고, 삭제할 수 있다.
이게 바로 DOM 조작(DOM Manipulation) 이다.

2. DOM 접근의 핵심 메서드

메서드 설명

document.getElementById(id)	ID로 요소 찾기
document.querySelector(selector)	CSS 선택자 1개 선택
document.querySelectorAll(selector)	CSS 선택자 여러 개 선택
element.textContent	요소의 텍스트 내용 변경
element.innerHTML	내부 HTML 직접 수정
element.style	CSS 속성 수정
document.createElement(tag)	새로운 요소 생성
parent.appendChild(child)	자식 요소 추가
parent.removeChild(child)	자식 요소 삭제

3. 예시 ①: 텍스트 수정하기

HTML:

<h1 id="title">안녕하세요</h1>
<button id="changeText">글자 바꾸기</button>

JS:

const title = document.getElementById("title");
const button = document.getElementById("changeText");

button.addEventListener("click", () => {
  title.textContent = "DOM을 마스터했습니다!";
});

✅ textContent 는 HTML 태그 없이 순수 텍스트만 변경할 때 사용.

4. 예시 ②: HTML 내용 통째로 변경

<div id="container">
  <p>기존 문장입니다.</p>
</div>
<button id="replaceBtn">HTML 바꾸기</button>

const container = document.getElementById("container");
const replaceBtn = document.getElementById("replaceBtn");

replaceBtn.addEventListener("click", () => {
  container.innerHTML = "<h2>새로운 문장이 등장!</h2><p>innerHTML로 교체되었습니다.</p>";
});

✅ innerHTML 은 HTML 태그 구조를 포함한 전체 교체.
단, XSS 공격에 취약할 수 있으므로 외부 입력을 바로 넣는 건 위험하다.

5. 예시 ③: 요소 추가하기

<ul id="todoList"></ul>
<input id="newTodo" placeholder="할 일 입력" />
<button id="addBtn">추가</button>

const list = document.getElementById("todoList");
const input = document.getElementById("newTodo");
const addBtn = document.getElementById("addBtn");

addBtn.addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = input.value;
  list.appendChild(li);
  input.value = "";
});

✅ createElement + appendChild 조합은 가장 기본적인 DOM 추가 패턴이다.
이 방식으로 동적인 리스트, 댓글, 게시판 등 거의 모든 기능을 구현할 수 있다.

6. 예시 ④: 요소 삭제하기

<ul id="todoList">
  <li>코딩 공부하기</li>
  <li>헬스장 가기</li>
</ul>
<button id="removeBtn">마지막 항목 삭제</button>

const list = document.getElementById("todoList");
const removeBtn = document.getElementById("removeBtn");

removeBtn.addEventListener("click", () => {
  const last = list.lastElementChild;
  if (last) list.removeChild(last);
});

✅ removeChild() 는 부모-자식 관계가 있어야 동작한다.
만약 선택한 요소를 직접 제거하고 싶다면 element.remove() 도 가능하다.

7. 예시 ⑤: 스타일 동적으로 바꾸기

<h2 id="headline">DOM 스타일 바꾸기</h2>
<button id="colorBtn">색상 변경</button>

const headline = document.getElementById("headline");
const colorBtn = document.getElementById("colorBtn");

colorBtn.addEventListener("click", () => {
  headline.style.color = headline.style.color === "tomato" ? "black" : "tomato";
});

✅ 자바스크립트에서 CSS 속성을 직접 조작할 수 있다.
단, CSS 속성 이름이 background-color일 경우 → JS에서는 backgroundColor처럼 카멜케이스로 써야 한다.

8. 예시 ⑥: querySelector / querySelectorAll

<ul>
  <li class="item">HTML</li>
  <li class="item">CSS</li>
  <li class="item">JavaScript</li>
</ul>

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

items.forEach((el, index) => {
  el.addEventListener("click", () => {
    alert(`당신이 클릭한 항목은: ${el.textContent} (index: ${index})`);
  });
});

✅ querySelectorAll() 은 NodeList를 반환하므로 forEach로 순회 가능.
→ 실제 UI 이벤트 등록 시 자주 사용되는 핵심 패턴이다.

9. DOM 이벤트 + 데이터의 결합

지금까지 배운 DOM 조작과 localStorage를 합치면
간단한 TODO 앱이 완성된다.

const todos = JSON.parse(localStorage.getItem("todos") || "[]");
const list = document.getElementById("todoList");

function render() {
  list.innerHTML = "";
  todos.forEach((todo, i) => {
    const li = document.createElement("li");
    li.textContent = todo;
    li.addEventListener("click", () => {
      todos.splice(i, 1);
      localStorage.setItem("todos", JSON.stringify(todos));
      render();
    });
    list.appendChild(li);
  });
}

document.getElementById("addBtn").addEventListener("click", () => {
  const value = document.getElementById("newTodo").value;
  todos.push(value);
  localStorage.setItem("todos", JSON.stringify(todos));
  render();
});

render();

✅ 핵심 포인트

DOM은 화면,
localStorage는 데이터,
이벤트는 연결고리 역할.

이 세 가지가 만나면 진짜 웹앱이 된다.

10. 정리

핵심 기능 설명

DOM 구조	HTML 문서를 객체 트리로 표현
주요 메서드	getElementById, querySelector, createElement
조작 방식	textContent, innerHTML, style
추가/삭제	appendChild, removeChild
활용 예시	TODO 리스트, 댓글, 동적 메뉴 등

11. 마무리

이제 HTML을 “보는 것”에서 끝나지 않고,
자바스크립트로 생성하고 조작할 수 있는 수준에 도달했다.

DOM은 자바스크립트의 손과 발이다.
이걸 자유롭게 다룰 수 있으면, 프레임워크 없이도 하나의 웹앱을 만들 수 있다.