Window vs Document

Window랑 Document는 같은 것이 아니다. Window는 Document를 포함하고 있다.

Window는 브라우저를 켰을 때 맨 먼저 로드되는 전역 객체이다. 스크립트가 실행되고 있는 그 창에 대한 정보를 갖고 있는 전역 객체이다. 그러니까 브라우저를 켰을 때 보이는 그 창 = Window 라고 개념적으로 생각하면 될 듯하다.

예를 들어 window를 콘솔에 쳐보면 이 객체가 기본적으로 갖고 있는 프로퍼티들 중에 innerHeight, innerWidth 등이 있다. 또 이 창이 포함하고 있는 iframes, document도 있다.

iframe 또한 하나의 window로 간주되며, 하위에 있는 iframe은 window.iframes로 접근할 수 있다. 그리고 이 iframe들은 document와 같은 window 프로퍼티를 가질 수 있다. 그리고 브라우저에서 여러 개의 탭을 사용한다면, 그 각각의 탭들 또한 각각의 window를 갖고 있다.

document는 그 창에 로드될 문서를 가리킨다. 예를 들어 html, xml 등이 그것이다. html이 파싱된 결과가 DOM 트리이며 이 트리의 root node가 Document 객체이다.  document에서 자기가 포함된 window에 대한 정보를 알려면 document.defaultView 로 접근하면 된다.

토막 지식 추가: 그렇다면 Window의 DOMContentLoaded 이벤트와 Document의 DOMContentLoaded 이벤트 차이는?

window.addEventListener('DOMContentLoaded', () => console.log('DOM fully loaded and parsed'))

document.addEventListener('DOMContentLoaded', () => console.log('DOM fully loaded and parsed'))

DOMContentLoaded 는 스타일시트, 이미지, 서브프레임 등의 로딩을 기다리지 않고 HTML 문서만 다운로드 및 파싱이 완료되었을 때 실행되는 이벤트다. 헷갈리기 쉬운 다른 이벤트로는 window 이벤트인 load가 있는데 load event는 이미지, 스타일시트 등 모든 의존성이 있는 리소스들까지 다 포함해서 로드가 완료되었을 때 발생하는 이벤트다.

어쨌든 이 이벤트의 타겟은 원래 document인데, 이벤트 캡처링이나 버블링 phase에서 window에서도 이를 들을 수 있는 것이다. 왜냐하면 window는 document를 포함하니까!

Ref

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
https://developer.mozilla.org/en-US/docs/Web/API/Document
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
https://developer.mozilla.org/en-US/docs/Web/API/Window
http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/