Window 객체(DOM, BOM, JavaScript)

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

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

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

• Window - 현재 열려있는 전체적인 창을 의미합니다.

• Document - 웹 브라우저가 웹 문서를 읽고 페이지가 렌더링 되는 부분을 의미합니다.

• Navigator - 사용자 눈에는 보이지 않지만 브라우저와 관련된 정보를 가져옵니다. 브라우저에 대한 버전, 정보, 종류 등을 제공합니다.

Window 객체란?

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

• DOM(Document Object Model) : 문서 객체 모델 - HTML 파일인 웹 문서를 브라우저가 렌더링하려면 브라우저가 이해할 수 있는 구조로 메모리에 올려야합니다. 그것을 구조화하여 표현한 것을 DOM tree, 이런 전체적인 컨셉, 모델을 DOM이라고 합니다.

• BOM(Browser Object Model) : 브라우저 객체 모델 - DOM과 달리 W3C의 표준 객체 모델은 아니지만 웹 브라우저와 관련된 객체의 집합으로써 JavaScript가 웹 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다. 

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

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

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

참고

Web API - MDN
API, 인터페이스 개념 - Coding Restaurant
인터페이스? API? - 새로비
자바스크립트 브라우저 객체 모델 - improver
Window, DOM, BOM이란? - over and over again
Window 객체 - TCP School