DOM 조작 핵심 패턴 10가지로 끝내는 현대 JavaScript
브라우저 환경이 표준화되면서 DOM 조작은 간결해지고 직관적으로 변했다. 특히 querySelector와 classList는 jQuery 시대를 완전히 대체하는 대표 기능이다. 아래 패턴은 실제 웹사이트 인터랙션 제작 시 가장 자주 사용하는 방식들로 구성했다.
1. 요소 선택: querySelector / querySelectorAll
DOM 선택은 모든 조작의 시작이다. CSS 선택자 문법을 그대로 사용하므로 직관적이고 학습 난도가 낮다.
const box = document.querySelector('.box');
const items = document.querySelectorAll('.item');
2. 클래스 제어: classList
클래스 추가, 제거, 토글 등 UI 변화를 제어할 때 가장 많이 사용하는 기능이다.
box.classList.add('active');
box.classList.remove('hidden');
box.classList.toggle('open');
- 토글 버튼
- 메뉴 열기/닫기
- 보임/숨김 전환
3. 속성과 데이터 제어: setAttribute / dataset
요소의 속성 변경이나 사용자 정의 데이터 전달은 인터랙션 구현에 자주 사용된다.
link.setAttribute('href', '/home');
btn.dataset.state = 'active';
dataset은 서버 값 전달, UI 상태 저장 등에 유용하다.
4. 텍스트 및 HTML 제어
콘텐츠 변경은 innerText 또는 innerHTML로 수행한다. 안전성과 목적에 따라 선택하면 된다.
title.innerText = '완료되었습니다'; content.innerHTML = '업데이트 성공
';
5. 요소 생성 및 삽입: createElement
동적으로 UI를 구성할 때 새로운 DOM 노드를 생성해 원하는 위치에 삽입할 수 있다.
const li = document.createElement('li');
li.innerText = '새 항목';
list.appendChild(li);
- 새 댓글 추가
- 동적 카드 UI
- 서버 데이터 리스트 렌더링
6. 요소 삭제: remove()
DOM 노드를 직접 제거할 수 있으며, 이벤트나 참조를 별도로 제거할 필요가 없다.
item.remove();
7. 스타일 직접 조작: style
빠르게 UI 변화를 줘야 한다면 style 속성을 활용한다. 다만 반복 사용 시 CSS 클래스화를 권장한다.
box.style.display = 'block'; box.style.backgroundColor = '#f3f3f3';
8. 부모·형제 탐색
DOM 구조를 기준으로 특정 부모나 형제 요소에 접근해야 하는 경우가 잦다.
const parent = item.closest('.row');
const next = item.nextElementSibling;
const prev = item.previousElementSibling;
9. 반복 처리: NodeList forEach
여러 요소를 가져와 동일한 작업을 반복할 때 가장 유용한 패턴이다.
document.querySelectorAll('.btn').forEach(btn => {
btn.classList.add('ready');
});
10. 이벤트 기반의 상태 관리
각 요소에 이벤트를 연결해 UI 상태를 전환하는 것은 DOM 인터랙션의 핵심이다. addEventListener로 대부분 해결된다.
btn.addEventListener('click', () => {
btn.dataset.state = btn.dataset.state === '1' ? '0' : '1';
btn.classList.toggle('active');
});
DOM 패턴을 익히면 UI 제작 속도가 올라가는 이유
위 10개의 패턴은 실제 UI 개발에서 가장 빈번하게 사용된다. 요소 선택, 클래스 조작, 이벤트 연결만 익히면 메뉴, 모달, 아코디언, 토글 버튼 등 대부분의 기능을 구현할 수 있다. 또 jQuery 의존성이 사라져 페이지 전체 로딩 속도까지 개선된다.
다음 4편에서는 이벤트 처리의 실전 패턴과 UI 컴포넌트 구현 방식을 정리한다. 이를 통해 현대 웹사이트에서 요구하는 인터랙션 기능을 모두 구현할 수 있다.
