DOM과 이벤트 —
웹을 움직인다

요소를 찾고, 바꾸고, 반응하게 만드는 법

이 세션에서
배우는 것

왜 DOM을
다뤄야 할까?

버튼을 누르면 색이 바뀌고, 카운터가 올라가고, 새 메시지가 뜬다 —
이 모든 실시간 변화는 JS가 DOM을 조작해 일어난다.

DOM을 알면 정적 페이지를 동적 앱으로 바꿀 수 있다.

DOM은 트리 구조다

브라우저는 HTML을 파싱해 계층적인 객체 트리로 만든다.

각 노드는 JavaScript 객체로, 속성과 메서드를 가진다.

DOM 트리와 요소 선택 —
더 깊게 이해하기

DOM은 단순한 HTML 복사본이 아니다 — JavaScript가 제어할 수 있는 살아있는 객체 구조다.

요소를 찾고 바꾸기

CSS 선택자로 원하는 요소를 집고, 속성을 직접 수정한다.

// 요소 선택
const btn = document.querySelector('.btn');
const items = document.querySelectorAll('li');

// 내용 변경
btn.textContent = "저장됨!";
btn.style.background = "#6ee7b7";

// 클래스 토글
btn.classList.add('active');
btn.classList.remove('disabled');
btn.classList.toggle('highlight');

이벤트 버블링 —
실제로는 어떻게?

자식 요소를 클릭하면 이벤트가 부모·조상 요소까지 차례로 전파된다.

핵심: 이 버블링 덕분에 부모 하나에 이벤트를 등록하면 자식 수십 개를 한 번에 처리할 수 있다 — 이것을 이벤트 위임(delegation)이라고 한다.

이벤트 흐름

사용자의 행동은 이벤트로 전달되고, 등록된 함수가 반응한다.

const btn = document.querySelector('#saveBtn');

btn.addEventListener('click', (event) => {
  console.log('클릭됨!', event.target);
  btn.textContent = '저장 완료';
});

실생활에서
이렇게 쓰여요

우리가 매일 사용하는 앱과 서비스 속에 DOM 조작이 녹아 있다.

💡 이 개념이 없다면 모든 변화마다 서버에서 새 HTML 페이지를 받아야 해 웹이 느리고 불편해진다.

자주 하는
오해 바로잡기

이렇게 생각하기 쉽지만, 실제로는 조금 다릅니다.

DOM은 설계도의 디지털 복사본

HTML은 종이 설계도, DOM은 자유롭게 수정 가능한 3D 모형이다.

이걸 알면
AI와 이렇게 대화해요

DOM과 이벤트를 이해하면 Claude나 ChatGPT를 훨씬 잘 활용할 수 있다.

이렇게
이해하셨나요?

💪 DOM 조작과 이벤트를 이해했다면, 이제 진짜 인터랙티브 웹을 만들 수 있습니다!

핵심 정리

다음 세션
Session 23 · HTTP와 요청/응답

URL 입력부터 화면 표시까지 — 브라우저 내부에서 벌어지는 일을 파헤친다.
렌더링, 캐시, DevTools의 세계로 들어간다.

💡 기억할 것: 화면의 변화는 모두 DOM 조작에서 출발한다.