DOM(Document Object Model)이란?

들어가며

웹 페이지에서 버튼을 클릭하면 내용이 바뀌거나, 입력값에 따라 화면이 달라지는 경험을 해본 적이 있을 겁니다.
이런 동적인 동작이 가능한 이유가 바로 DOM(Document Object Model) 덕분입니다.
이 글에서는 DOM이 무엇인지, JavaScript로 어떻게 조작하는지 정리해보겠습니다.

DOM이란?

DOM은 HTML 문서를 JavaScript로 조작할 수 있게 만든 객체 구조입니다.
브라우저가 HTML을 읽으면 각 태그를 노드(Node) 라는 객체로 변환하고,
이 노드들을 트리 구조로 연결합니다.

[HTML 문서]                    [DOM 트리]

<html>                              document
  <head>                            └── html
    <title>제목</title>                  ├── head
  </head>                               │   └── title ("제목")
  <body>                                └── body
    <h1>안녕하세요</h1>                      ├── h1 ("안녕하세요")
    <p>반갑습니다</p>                        └── p ("반갑습니다")
  </body>
</html>

JavaScript는 이 트리 구조를 통해 HTML 요소를 읽고, 수정하고, 추가하고, 삭제할 수 있습니다.

DOM이 필요한 이유

HTML만으로는 정적인 화면만 만들 수 있습니다.
DOM을 통해 JavaScript가 HTML에 접근할 수 있어야 동적인 화면이 가능합니다.

HTML  → 화면 구조 정의
CSS   → 화면 스타일 정의
JavaScript + DOM → 화면을 동적으로 변경

DOM 요소 선택

JavaScript에서 DOM 요소에 접근하는 방법입니다.

// id로 선택
const title = document.getElementById("title");

// CSS 선택자로 선택 (하나)
const btn = document.querySelector(".btn");

// CSS 선택자로 선택 (여러 개)
const items = document.querySelectorAll(".item");

// 태그명으로 선택
const paragraphs = document.getElementsByTagName("p");

DOM 요소 읽기 / 수정

선택한 요소의 내용이나 스타일을 읽고 변경할 수 있습니다.

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

// 내용 읽기
console.log(title.textContent); // "안녕하세요"
console.log(title.innerHTML);   // "<b>안녕하세요</b>"

// 내용 수정
title.textContent = "반갑습니다"; // 텍스트만 변경
title.innerHTML = "<b>반갑습니다</b>"; // HTML 포함 변경

// 스타일 수정
title.style.color = "red";
title.style.fontSize = "24px";

// 속성 수정
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");

DOM 요소 추가 / 삭제

// 요소 생성
const newItem = document.createElement("li");
newItem.textContent = "새로운 항목";

// 요소 추가
const list = document.getElementById("list");
list.appendChild(newItem);        // 마지막에 추가
list.prepend(newItem);            // 맨 앞에 추가

// 요소 삭제
const oldItem = document.getElementById("oldItem");
oldItem.remove(); // 요소 삭제

이벤트 처리

DOM의 가장 중요한 역할 중 하나는 사용자 이벤트를 감지하고 처리하는 것입니다.

const btn = document.getElementById("btn");

// 클릭 이벤트
btn.addEventListener("click", function () {
    alert("버튼이 클릭됐습니다!");
});

// 입력 이벤트
const input = document.getElementById("input");
input.addEventListener("input", function (e) {
    console.log("입력값: " + e.target.value);
});

// 마우스 오버 이벤트
const box = document.getElementById("box");
box.addEventListener("mouseover", function () {
    box.style.backgroundColor = "skyblue";
});

실전 예시 - 버튼 클릭으로 목록 추가

<!DOCTYPE html>
<html>
<body>
    <input id="inputText" type="text" placeholder="항목 입력" />
    <button id="addBtn">추가</button>
    <ul id="list"></ul>

    <script>
        const input = document.getElementById("inputText");
        const addBtn = document.getElementById("addBtn");
        const list = document.getElementById("list");

        addBtn.addEventListener("click", function () {
            const text = input.value.trim();

            if (text === "") return; // 빈 값 방지

            // 새 li 요소 생성
            const newItem = document.createElement("li");
            newItem.textContent = text;

            // 삭제 버튼 추가
            const deleteBtn = document.createElement("button");
            deleteBtn.textContent = "삭제";
            deleteBtn.addEventListener("click", function () {
                newItem.remove(); // 해당 li 삭제
            });

            newItem.appendChild(deleteBtn);
            list.appendChild(newItem); // 목록에 추가

            input.value = ""; // 입력창 초기화
        });
    </script>
</body>
</html>

DOM vs 가상 DOM (Virtual DOM)

React를 배우면 가상 DOM(Virtual DOM) 이라는 개념이 등장합니다.

[실제 DOM]
변경이 생길 때마다 브라우저가 전체를 다시 계산하고 화면을 업데이트
→ 변경이 잦으면 성능 저하

[가상 DOM - React]
변경 전후 가상 DOM을 비교 → 실제로 바뀐 부분만 실제 DOM에 반영
→ 불필요한 업데이트를 줄여 성능 향상

// 실제 DOM 직접 조작 - 매번 브라우저 업데이트
document.getElementById("count").textContent = count;

// React - 가상 DOM이 변경된 부분만 업데이트
const [count, setCount] = useState(0);
<p>{count}</p>

DOM 관련 주요 속성 정리

속성/메서드	설명
`document.getElementById()`	id로 요소 선택
`document.querySelector()`	CSS 선택자로 요소 하나 선택
`document.querySelectorAll()`	CSS 선택자로 요소 여러 개 선택
`element.textContent`	텍스트 내용 읽기/수정
`element.innerHTML`	HTML 포함 내용 읽기/수정
`element.style`	스타일 수정
`element.setAttribute()`	속성 설정
`element.classList`	클래스 추가/제거/토글
`element.appendChild()`	자식 요소 추가
`element.remove()`	요소 삭제
`element.addEventListener()`	이벤트 핸들러 등록

정리

DOM은 HTML 문서를 JavaScript로 조작할 수 있게 만든 트리 구조의 객체 모델이다.
브라우저가 HTML을 읽으면 각 태그를 노드 객체로 변환하고 트리 구조로 연결한다.
JavaScript는 DOM을 통해 HTML 요소를 선택, 읽기, 수정, 추가, 삭제할 수 있다.
이벤트 리스너를 통해 클릭, 입력 등 사용자 동작에 반응하는 동적인 화면을 만들 수 있다.
React는 가상 DOM을 사용해 변경된 부분만 실제 DOM에 반영해 성능을 최적화한다.

문혁진님의 블로그