DOM Event

JavaScript DOM 조작 흐름

웹페이지가 사용자 입력에 반응하려면 스크립트 위치, DOM 선택, 이벤트 연결, 화면 갱신 순서를 나눠 읽어야 합니다.

script

실행 위치 확인

HTML이 준비되기 전인지 후인지에 따라 요소 선택 성공 여부가 달라집니다.

select

DOM 요소 선택

id, class, tag 선택자로 바꿀 대상을 먼저 정확히 잡습니다.

state

값과 자료형 확인

입력값, 변수, typeof 결과가 조건문 판단의 기준이 됩니다.

event

행동과 함수 연결

click, input 같은 이벤트가 발생하면 등록한 콜백이 실행됩니다.

render

문서 갱신

textContent, class, style 변경이 브라우저 화면에 반영됩니다.

선언 차이

var/let/const는 범위와 재할당을 함께 봅니다

스코프, 중복 선언, 값 변경 가능 여부를 한 번에 비교합니다.

형 확인

typeof는 값의 현재 자료형을 읽습니다

문자열, 숫자, 불리언, 객체처럼 결과 문자열이 무엇인지 확인합니다.

문서 선택

DOM은 HTML 요소를 찾아 바꾸는 통로입니다

선택자, 텍스트 변경, 스타일 수정이 문서 객체를 통해 이뤄집니다.

행동 연결

이벤트는 사용자 행동과 함수를 잇습니다

발생 시점과 실행될 콜백을 한 쌍으로 봅니다.

브라우저 객체

DOM과 BOM은 바라보는 대상이 다릅니다

DOM은 문서 요소, BOM은 location, history, navigator 같은 브라우저 환경을 다룹니다.

JavaScript 항목

자료형 판별 값 자체가 아니라 typeof가 돌려주는 문자열을 읽습니다.
문서 조작 요소 선택, 내용 변경, 스타일 수정이 DOM을 거치는지 확인합니다.
콜백 연결 사용자 행동이 언제 발생하고 어떤 함수가 실행되는지 순서로 봅니다.