5장 DOM 이벤트

DOM 조작과 이벤트 루프

DOM 조작은 문서 요소를 선택해 내용과 속성을 바꾸고, 이벤트 처리는 사용자 행동에 맞춰 그 변경을 실행합니다.

01

Select

querySelector 계열로 조작할 요소를 정확히 찾습니다.

02

Update

textContent, classList, style, attribute로 화면 상태를 바꿉니다.

03

Listen

addEventListener로 클릭, 입력, 제출 같은 행동을 감지합니다.

04

Cleanup

필요 없어진 리스너와 동적 요소를 정리해 예측 가능한 상태를 유지합니다.

요소 선택

선택자가 너무 넓으면 의도하지 않은 여러 요소가 함께 바뀔 수 있습니다.

내용 변경

HTML 문자열 삽입은 편리하지만 보안과 구조 오류를 조심합니다.

노드 생성

createElement와 append로 필요한 요소를 명시적으로 추가합니다.

이벤트 객체

target, currentTarget, preventDefault로 행동 맥락을 제어합니다.

작업 순서

선택, 이벤트 등록, 상태 계산, DOM 반영 순서로 코드를 나눕니다.

DOM 조작과 이벤트 실수 방지

요소가 아직 로드되기 전에 선택하면 null이 될 수 있으니 실행 시점을 봅니다.

DOM 조작과 이벤트 루프

버튼 클릭으로 목록 항목을 추가하고 입력값을 검증합니다.