[DOM & BOM] window와 document의 차이점은 무엇인가요?

[shinsehantan]

Document는 Window 안에 포함됩니다. 우선, window는 모든 객체의 조상, 전역객체(글로벌객체)입니다. 모든 객체를 포함하고 있기 때문에 window는 생략하고 사용할 수 있고, 함수 안에서 선언한 변수를 제외한다면, 개인이 만든 변수도 모두 window 객체 안에 등록됩니다. 이렇게 window는 글로벌 변수, 글로벌 기능, 위치, 내역 등을 저장하는 global object이며, setTimeout, ajax 호출(XMLHttpRequest), console, localStorage 또한 window의 일부입니다. 이렇게 브라우저 전체를 담당하는 것이 Window 객체라면, 그중에서 웹페이지만 담당하는 것이 Document 객체입니다. Document가 Window 객체 안에 포함되는 것인데요. 저희가 Document.getElementById로 흔히 사용하는 것도 사실 Window.Document.getElementById입니다. 또, Document에서 이렇게 getElementById 또는 addEventListener를 사용할 수 있는 이유는 모든 노드가 Document의 일부이기 때문입니다. 웹 페이지 그 자체를 의미하는 Document 객체는 HTML 요소의 선택, 생성, 이벤트 핸들러 추가, HTML 객체의 선택 등 HTML 요소와 관련된 작업을 도와주는 다양한 메서드를 제공합니다.

[bucketHaneul]

window객체는 브라우저를 시작할 때 가장 처음 생성되는 객체로, 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체입니다. 따라서, window 객체는 어디서든 접근 가능합니다.

이러한 window 객체 안에는 document 객체가 존재하는데요. 이 document 객체는 현재 표시된 웹페이지의 객체 모델로, DOM이라고도 합니다.

여기서 document.addEventListener 를 할 수 있는 이유는, event target object -> Node -> documnet 의 순으로 상속을 받기 때문이고, 따라서 document 객체 안에 포함된 모든 노드들에 이벤트를 걸 수 있습니다.

[Tanney-102]

window객체는 브라우저에서 동작하는 자바스크립트의 전역 객체이다. document 객체는 DOM에 따라 각 html 노드를 트리로 구조화 한 객체이다. window가 전역 객체이므로 document객체는 window객체에 포함된다.

[devhyun637]

브라우저가 시행되면 전역 객체로 window가 생성된다. 그리고 이 안에 우리가 작성한 문서 영역(Html)에 해당하는 document 객체가 포함된다.

브라우저는 이 doucment를 이해할 수 있도록 한줄 한줄 읽으면서 DOM tree를 만든다. DOM은 Node 타입의 트리로 구성되어 있고, Node 객체는 EventTarget 을 상속받기 때문에 DOM 요소에 대한 이벤트 조작이 가능하다.

[jum0]

window는 각각의 브라우저 탭에서 자바스크립트에 대한 실행 컨텍스트 및 전역 객체입니다. Window 객체의 프로퍼티로는 document와 screen이 있으며, 전역 변수, 전역 함수, location, history, setTimeout, console 또는 localStorage 등을 가지고 있습니다. document 객체는 앞에서 말했던 것처럼 window 객체의 프로퍼티입니다. document는 window 객체가 먼저 브라우저에 로드된 이후, window 객체 안에 로드되는 객체입니다. 프로퍼티로는 title, URL, cookie 등이 있습니다. 모든 노드들은 document에 속하므로, getElementById 나 addEventListener 등을 사용할 수 있습니다.

[ddongule]

window는 DOM문서를 담은 창, Document속성이 창에 불러온 DOM 문서입니다. 브라우저 전체를 담당하는게 Window 객체이고, 모든 객체의 조상, 그리고 생략가능합니다. 모든 자료형을 포함하고있고, 우리가 만든 전역 변수들도 모두 window 객체 안에 등록됩니다. document는 window에 포함되며, 웹사이트만 담당합니다.