[jquery] window와 document 의 차이

window : 브라우저 객체 모델의 최상위 객체 (BOM)

• 웹 브라우저의 탭 or 창의 모델을 나타내며 이런 웹 브라우저 객체 모델의 최상위 객체가 window 객체임
• window 객체는 현재 웹 브라우저의 창이나 탭을 표현함

document : 문서 객체 모델의 최상위 객체 (DOM)

• 웹 페이지의 모델을 생성하며 이러한 문서 객체 모델의 최상위 객체가 document임
• window 객체의 속성이기도 함

 

쉽게 말해, 

window : 웹 브라우저 창

document 웹 브라우저 창 안에 보이는 문서

 

 

차이 - 1

$('window').height()     -->  브라우저 창의 높이, 즉, 현재 보이는 부분의 높이를 구함 

$('document').height()  -->  눈에 보이지 않는 부분을 포함하여 문서 전체의 높이를 구함

 

차이 - 2

$('window').load(function){ });   -->  화면에 필요한 모든 요소들이 웹 브라우저의 메모리에 로드 된 후 콜백함수 실행 (css, js, image 등)

$('document').ready(function{ });   -->  DOM 구조가 메모리에 로드되면 인자로 받은 콜백함수를 실행시킨다.

 

순서로 보자면 document.ready가 실행된 후 window.load 이벤트가 실행된다.

 

 

 

 

출처:

http://june0313.github.io/2019/02/16/windows-document/