DOM 작업 흐름

DOM 변경 절차

DOM API는 HTML 요소를 객체처럼 다루게 해 주고, 이벤트는 사용자의 행동에 맞춰 코드를 실행하게 합니다.

1

선택

id, class, CSS 선택자로 대상 요소를 찾습니다.

2

읽기

textContent, value, attribute 값을 확인합니다.

3

변경

내용, 속성, classList, 새 요소를 수정합니다.

4

반응

click, input, submit 이벤트에 핸들러를 연결합니다.

element.addEventListener("click", handler)

이벤트 객체를 함께 읽으면 어떤 요소에서 어떤 행동이 일어났는지 확인하고 기본 동작도 제어할 수 있습니다.