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