Window and Document

자바스크립트에서 window와 document는 모두 브라우저가 제공하는 자바스크립트 내장 객체이다. 이 두 객체가 의미하는건 무엇이고 어떤 차이가 있을까?

Window - 브라우저 객체 모델의 최상위 객체

브라우저 객체 모델(BOM : Browser Object Model) 은 웹브라우저의 탭 혹은 창의 모델을 나타내는데, 이러한 웹브라우저 객체 모델의 최상위 객체가 window 객체이다. window 객체는 현재 웹브라우저의 창이나 탭을 표현한다.

Document - 문서 객체 모델의 최상위 객체

문서 객체 모델(DOM : Document Object Model) 은 현재 웹페이지의 모델을 생성하며, 이러한 문서 객체 모델의 최상위 객체가 document 객체이다. document 객체는 전체 페이지를 표현한다.

쉽게 말해, window는 웹브라우저 창, document는 웹브라우저 창 안에 보이는 문서라고 생각하면 된다. 실제로 document 객체는 window 객체의 속성이기도 하다.

$(window).height() vs. $(document).height()

간단하게 jquery 예제를 통해 비교해보자. 두 객체를 jquery로 감싸면 동일한 height() 메서드가 존재한다.

$(window).height()

위의 코드는 브라우저 창의 높이, 즉 현재 보이는 부분의 높이를 구한다.

$(document).height()

반면 위처럼 document객체의 height() 메서드를 호출하면 눈에 보이지 않는 부분을 포함하여 문서 전체의 높이를 구하게 된다.

$(document).ready() vs. $(window).load()

$(document).ready() 와 $(window).load()에도 차이점이 있다.

$(document).ready(function() {
    // code to run...
});

위의 코드는 DOM 구조가 메모리에 로드되면 인자로 받은 콜백함수를 실행시킨다.

$(window).load(function() {
    // code to run...
});

반면 위의 코드는 화면에 필요한 모든 요소들이 웹 브라우저의 메모리에 로드 된 다음에 콜백함수를 실행한다.
여기서 말하는 모든 요소에는 css, js, image.. 등이 포함된다.
순서로 보자면 document의 ready이벤트가 window의 load이벤트보다 먼저 발생하게 된다.