DOM과 BOM은 각각 어떤 대상을 다루나요?

이렇게 답해 보세요 (핵심 답변)

DOM(Document Object Model)은 HTML이나 XML 문서의 요소·속성·텍스트를 트리 구조의 노드 객체로 모델링해 JavaScript가 문서 내용을 읽고 수정하거나 이벤트를 다룰 수 있게 해 주는 표준 인터페이스입니다. 반면 BOM(Browser Object Model)은 문서 자체를 넘어 window, location, history, navigator, screen처럼 브라우저 창과 실행 환경을 제어하는 객체들을 묶어 부르는 관용적인 명칭입니다. 따라서 문서 내부 요소를 바꿀 때는 DOM API(document.*)를 쓰고, URL 이동이나 화면 크기·브라우저 환경 정보를 다룰 때는 BOM API를 쓰며, Node.js 기반의 서버 렌더링(SSR) 시점에는 둘 다 브라우저처럼 존재하지 않는다는 점을 구분해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 문서 콘텐츠 트리(document)와 이를 담고 있는 브라우저 창·탐색 환경(window, history, location)의 책임을 나누어 이해할 수 있습니다.
2. SSR이나 빌드 시점에 실행되는 코드에서 window나 document를 무조건 참조하면 ReferenceError가 나므로 실행 환경 분기나 마운트 이후 접근이 필요합니다.

면접에서 자주 하는 실수

DOM을 HTML 소스 텍스트나 화면에 최종 칠해진 픽셀 자체와 동일시하거나, BOM을 단일 W3C 표준 문서 하나로 고정된 규격이라고 설명하면 부정확합니다.