JavaScript DOM 조작 기초부터 실전까지 — 웹 페이지를 동적으로 만드는 완벽 가이드

DOM이란 무엇인가?

DOM(Document Object Model)은 HTML 문서를 JavaScript가 이해할 수 있는 객체 구조로 변환한 것입니다. 쉽게 말해 HTML 태그 하나하나를 JavaScript로 읽고, 수정하고, 삭제하고, 추가할 수 있게 해주는 인터페이스입니다.

브라우저가 HTML을 읽으면 트리 구조의 DOM을 생성합니다. document가 최상위 노드이고, 그 아래로 html, head, body, div, p 등이 부모-자식 관계로 연결됩니다. 이 트리를 JavaScript로 탐색하고 수정하는 것이 DOM 조작입니다.

요소 선택하기 — 3가지 핵심 메서드

getElementById — 가장 빠른 선택

ID는 문서 내에서 유일하므로 가장 빠르게 요소를 찾을 수 있습니다. document.getElementById('header')처럼 사용하며, ID가 없으면 null을 반환합니다.

querySelector — 가장 유연한 선택

CSS 선택자를 그대로 사용할 수 있어 가장 유연합니다. document.querySelector('.card:first-child')처럼 복잡한 선택도 가능합니다. 일치하는 첫 번째 요소만 반환합니다.

querySelectorAll — 여러 요소 선택

조건에 맞는 모든 요소를 NodeList로 반환합니다. document.querySelectorAll('.item')으로 클래스가 item인 모든 요소를 가져온 후 forEach로 순회할 수 있습니다.

내용과 스타일 변경하기

텍스트 변경

element.textContent는 순수 텍스트만 변경하고, element.innerHTML은 HTML 구조까지 변경할 수 있습니다. 보안상 사용자 입력을 innerHTML에 넣으면 XSS 공격에 취약해지므로, 대부분의 경우 textContent를 사용하세요.

스타일 변경

인라인 스타일은 element.style.color = 'red'로 변경합니다. 하지만 더 좋은 방법은 CSS 클래스를 토글하는 것입니다. element.classList.add('active'), element.classList.toggle('hidden')처럼 사용하면 관심사 분리(CSS와 JS)가 잘 됩니다.

이벤트 처리 — 사용자와 상호작용하기

addEventListener 기본

가장 많이 사용하는 메서드입니다. button.addEventListener('click', function() { ... })으로 클릭 이벤트를 처리합니다. click, input, submit, keydown, scroll, resize 등 수십 가지 이벤트 타입이 있습니다.

이벤트 위임 (Event Delegation)

리스트 항목이 100개일 때 각각에 이벤트를 등록하면 메모리 낭비입니다. 대신 부모 요소에 하나만 등록하고 event.target으로 실제 클릭된 요소를 판별하는 패턴을 이벤트 위임이라고 합니다. 이것은 실무에서 반드시 알아야 하는 핵심 패턴입니다.

요소 생성, 추가, 삭제

document.createElement('div')로 새 요소를 만들고, parent.appendChild(child)로 추가합니다. element.remove()로 삭제할 수도 있습니다.

동적으로 카드를 추가하거나, 할일 목록을 관리하거나, 무한 스크롤을 구현할 때 이 메서드들이 사용됩니다.

실무에서는 어떻게 쓰일까?

현대 프론트엔드에서는 React, Vue, Svelte 같은 프레임워크가 DOM 조작을 대신합니다. 하지만 바닐라 JS의 DOM 조작을 이해해야 프레임워크가 '왜' 그렇게 동작하는지 근본적으로 이해할 수 있습니다. React의 Virtual DOM, Vue의 반응성 시스템 모두 결국 실제 DOM을 효율적으로 업데이트하기 위한 추상화입니다.