전역객체 Window와 BOM, DOM의 정의

 

 

Window 객체

Window 객체는 모든 객체가 포함된 최상위 객체이며, 브라우저의 창이나 프레임을 의미합니다. 다시말해서 Window 객체는 전역객체로, 전역변수와 전역스코프에서 선언된 함수는 Window 객체의 Property입니다. Window 객체는 식별자 'window'를 통해서 접근이 가능하며, 호출 시 생략도 가능합니다.

 

 

console.log('coding'); // coding
window.console.log('coding'); // coding

 

 

window 객체의 하위요소로 DOM, BOM, JavaScript가 있는데, DOM는 웹페이지의 문서를 제어하기 위한 객체모델이고, BOM은 웹브라우저의 창이나 프레임을 추상화해서 제어할 수 있도록 하는 객체모델입니다.

 

 

 

---

BOM

BOM(Browser Object Model)은 브라우저가 문서를 제외한 각종 요소들을 객체화시킨 것입니다. 대표적으로 현재 열려있는 창의 URL을 받아오거나, 브라우저의 정보를 받아올 수있는 기능 등을 제공하고 있습니다. BOM은 Window의 프로퍼티와 메소드를 통해 제어할 수 있습니다.

 

location 객체

현재 열려있는 브라우저 창의 URL을 알려주는 객체입니다. 즉, 브라우저의 주소표시줄과 관련이 있습니다.

속성	설명
location.href	URL 전체 값
location.protocol	URL의 프로토콜 부분
location.host	URL의 호스트 부분
location.port	URL의 도메인 부분
location.pathname	URL의 '/'문자 뒤, 경로 부분
location.search	URL의 쿼리스트링 부분
location.hash	URL의 '#'문자 뒤, 프래그먼트 식별자

 

 

location.href //현재 문서 URL 알아내기
location.href = "http://www.naver.com" //현재 문서를 대입한 URL로 이동하기
location.reload(); // 새로고침

 

 

navigator 객체

현재 웹 페이지를 실행하고 있는 브라우저에 대한 정보가 있는 객체입니다. 주로 호환성 문제등을 위해서 사용됩니다.

속성	설명
navigator.appName	웹 브라우저의 이름으로, IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시한다.
navigator.appVersion	브라우저의 버전을 의미한다.
navigator.userAgent	브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용이다.
navigator.platform	브라우저가 동작하고 있는 운영체제에 대한 정보이다.

 

navigator.appName // "Netscape" :: chrome
navigator.appVersion
// "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"

 

history 객체

브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다.

속성 및 메서드	설명
history.length	브라우저 히스토리 목록의 개수를 보여준다.
history.forward()	다음 페이지로 이동한다. (앞으로가기)
history.back()	이전 페이지로 이동한다. (뒤로가기)
history.go(1|-1)	인수로 1을 전달하면 forward(), -1을 전달하면 back()과 같은 동작을 한다.

 

 

screen 객체

웹 브라우저 화면이 아닌, 사용자의 운영체제 디스플레이 속성 정보를 저장하는 객체입니다.

속성	설명
screen.availWidth	실제 사용할 수 있는 화면의 크기의 Width를 픽셀 단위로 반환한다.
screen.availHeight	실제 사용할 수 있는 화면의 크기의 Height를 픽셀 단위로 반환한다.
screen.width	사용자 디스플레이 화면의 크기의 Width를 픽셀 단위로 반환한다.
screen.height	사용자 디스플레이 화면의 크기의 Height를 픽셀 단위로 반환한다.
screen.colorDepth	한 색상당 사용할 수 있는 비트 수를 반환한다.
screen.pixelDepth	화면 픽셀당 표시할 수 있는 비트 수를 반환한다.

 

※ screen.width와 screen.heigth는 현재 사용자의 모니터 화면 크기를 반환

※ window.outerWidth와 window.outerHeigth는 현재 브라우저 창의 크기를 반환

 

---

DOM

DOM(Document Object Model)은  웹 문서의 구조와 관계를 객체로 표현하는 방법입니다. 웹 문서의 모든 요소를 JavaScript를 통해 접근이 가능합니다. 브라우저가 웹 문서를 이해할 수 있도록 구성이되어있습니다. 그리고 모든 요소들과의 관계를 표현할 수 있는 트리구조로 구성되어있고, document라는 전역변수로 접근이 가능합니다.

 

 

 

위 그림과 같이 HTML 문서를 객체로 표현한 것이 DOM이 하는 역할이다.