[Javascript] window vs document

Window vs Document

현재 프론트엔드 개발을 하고 있지만, window와 document의 차이에 대해 알지 못하고 그냥 사용했다는게 생각이 나서 스터디를 한 후 포스팅한다.

보통 window/document 객체를 참조하는 작업들은 아래와 같다.

1. 이벤트 리스너 등록

window.addEventListener('scroll', function(){})
document.addEventListener('click', function(){})

2. dom 객체 접근

document.body.style.backgroundColor = '#fcfcfc';
document.getElementById('input').focus();

3. 스크롤 위치 이동

window.scrollTo(pos);

4. 창 닫기/열기

window.close();
window.open();

이렇게만 보면 뭔가 쓰임새가 다른건 알겠는데 어떻게 다른지는 자세히 알수가 없다. 그래서 찾아본 결과를 정리해보면,

• window는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체이다. 쉽게 말하면 브라우저의 창이고 어디서든 접근이 가능하다. document는 window 객체의 속성으로 브라우저 창의 HTML 문서 객체다. 즉, window 객체 안에 document 객체가 존재한다.

• window 객체는 document 객체를 포함하지만 HTML 요소는 아니다.
• window.height() vs. document.height() : window.height는 브라우저의 창의 높이, 즉 현재 보이는 부분의 높이이고, document.height는 눈에 보이지 않는 부분을 포함한 문서 전체의 높이를 구하게 된다.