Window 객체(DOM, BOM, JavaScript)

이번 글에선 웹 브라우저의 Window 객체와 브라우저 범위에 대해 공부한 내용을 정리했습니다.

도움이 되었으면 좋겠습니다.

브라우저 범위(Window, Document, Navigator)

Window 객체는 전체 창(window)을 나타냅니다.

• Window - 현재 열려있는 전체적인 창을 의미합니다.
• Document - 웹 브라우저가 웹 문서를 읽고 페이지가 렌더링 되는 부분을 의미합니다.
• Navigator - 사용자 눈에는 보이지 않지만 브라우저와 관련된 정보를 가져옵니다. 브라우저에 대한 버전, 정보, 종류 등을 제공합니다.

Window 객체란?

전역객체이며 JavaScript의 최상위객체이기도 합니다. DOM, BOM, JavaScript 모두 window 객체의 프로퍼티가 됩니다.

window 객체와의 관계

• DOM(Document Object Model) : 문서 객체 모델 - HTML 파일인 웹 문서를 브라우저가 렌더링하려면 브라우저가 이해할 수 있는 구조로 메모리에 올려야합니다. 그것을 구조화하여 표현한 것을 DOM tree, 이런 전체적인 컨셉, 모델을 DOM이라고 합니다.
• BOM(Browser Object Model) : 브라우저 객체 모델 - DOM과 달리 W3C의 표준 객체 모델은 아니지만 웹 브라우저와 관련된 객체의 집합으로써 JavaScript가 웹 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다. 

navigator	브라우저명과 버전 정보 등을 속성으로 가짐
window	최상위 객체
document	현재 문서에 대한 정보
location	현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL
history	브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작
screen	사용자의 화면 크기, 사용 가능한 색상의 수를 포함

Web APIs와 오브젝트 사용해보기

Web APIs 글에서 설명했었던 APIs와 오브젝트들을 둘러보겠습니다. 먼저 윈도우 사용자는 Ctrl + Shift + i, 맥 사용자는 Cmd + Option + i 키를 눌러서 개발툴을 사용하실 수 있습니다.

console.log(window); 를 입력하시면 엄청나게 많은 API들과 인터페이스(객체 유형)을 확인하실 수 있습니다.

window는 기본적으로 글로벌 오브젝트이며 console.log(this);를 입력해도 Window가 나옵니다. 따라서 window가 생략이 가능합니다.

window 입력 생략이 가능하다.

---

참고

브라우저101 - 드림코딩 온라인 아카데미
Web API - MDN
API, 인터페이스 개념 - Coding Restaurant
인터페이스? API? - 새로비
자바스크립트 브라우저 객체 모델 - improver
Window, DOM, BOM이란? - over and over again
Window 객체 - TCP School
navigator 객체 - WEBSTORYBOY