브라우저 객체(BOM)

오늘은 브라우저 객체(BOM)에 대해 정리해보려고 한다.

BOM(Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델로 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM이라고 한다.

 

BOM을 사용하면 자바스크립트가 브라우저와 대화할 수 있고 BOM의 객체모델을 보면 아래와 같다.

 

최상위 객체는 window 객체이고 하위 객체로 6개의 객체를 가지고 있다.

그러면 각각의 객체에 대해 알아보자.

 

 

1) window 객체

window 객체는 모든 브라우저에서 지원되는 객체로 우리가 보고 있는 브라우저 창을 의미한다.

window 객체의 특징은 전역 객체를 만들 때 자동으로 생성되는 전역 객체이며 이들은 자동으로 window 객체의 멤버가 된다.

즉, 위 특징으로 아래의 코드가 같다는 것이다.

// window 객체를 생략가능
window.document.getElementById("div-1");
document.getElementById("div-1");

// window객체의 메소드를 사용 시에도 생략가능
window.alert("설명,,");
alert("설명,,");

 

window의 속성은 아래의 표와 같다.

window 객체의 속성과 메소드는 아래의 링크에 자세한 설명이 있어 참고하면 좋을 것 같다.

https://www.w3schools.com/jsref/obj_window.asp

Window Object

 

 

2) screen 객체

screen 객체는 사용자 화면에 대한 정보를 가지고 있는 객체이다.

screen 객체는 메소드가 없고 속성만 존재하여 사용자 화면의 정보를 제공하는데 screen 객체의 메소드는 아래의 표와 같다.

속성	설명
width	윈도우가 아닌 스크린의 화면 너비를 픽셀 단위로 반환
height	윈도우가 아닌 스크린의 화면 높이를 픽셀 단위로 반환
availWidth	작업 표시줄과 같은 인터페이스 기능을 제외한 스크린의 너비를 픽셀 단위로 반환
availHeight	작업 표시줄과 같은 인터페이스 기능을 제외한 스크린의 높이를 픽셀 단위로 반환
colorDepth	한 색상을 표시하는 데 사용되는 비트 수를 반환
pixelDepth	스크린의 픽셀 깊이를 반환

 

 

 

3) location 객체

location 객체는 현재 페이지 주소(URL)에 대한 정보를 가지고 있는 객체로 location 객체는 적용되는 공개 표준은 없지만 모든 주요 브라우저에서 지원한다.

location 객체의 속성은 아래의 표와 같다.

속성	설명
host	URL의 호스트 명과 포트 번호를 설정하거나 반환
href	현재 페이지의 URL을 반환
hostname	웹 호스트의 도메인 명을 반환
pathname	현재 페이지의 경로와 파일 이름을 반환
origin	URL의 프로토콜, 호스트 명, 포트 번호를 반환
port	URL의 포트 번호를 설정하거나 반환
protocol	페이지의 사용된 웹 프로토콜을 반환
assign	새 문서를 로드

 

 

 

4) history 객체

history 객체는 사용자가 방문한 URL을 포함하여 브라우저 기록을 가지고 있는 객체이다.

사용자의 개인 정보 보호를 위해 자바스크립트가 history 객체에 접근할 수 있는 방법에 제한을 두고 있다.

history 객체의 속성과 메소드는 아래의 표와 같다.

속성	설명
length	히스토리 목록의 URL 수를 반환

속성	설명
back()	브라우저에서 뒤로가기 버튼을 클릭하는 것과 같은 기능을 제공
forward()	브라우저에서 앞으로가기 버튼을 클릭하는 것과 같은 기능을 제공

 

 

 

5) navigator 객체

navigator 객체는 방문자의 브라우저에 대한 정보를 담고 있는 객체이다.

navigaotor 객체의 속성과 메소드는 아래의 표와 같다.

속성	설명
cookieEnabled	쿠키의 활성화 여부를 boolean 값으로 반환(활성화되어 있으면 true, 되어 있지 않으면 false)
appName	브라우저의 응용 프로그램 이름을 반환
appCodeName	브라우저의 응용 프로그램 코드 이름을 반환
product	브라우저 엔진의 제품 이름을 반환
appVersion	브라우저에 대한 버전 정보를 반환
userAgent	브라우저에서 브라우저로 보낸 사용자 에이전트 헤더를 반환
platform	브라우저 플랫폼(운영체제)를 반환
language	브라우저의 언어를 반환
online	브라우저가 온라인 상태이면 true를 반환

메소드	설명
javaEnabled()	자바가 활성화되어 있으면 true를 반환

 

 

window객체의 하위 객체 중 하나인 document 객체는 DOM이라는 객체모델을 따로 가지고 있으므로 따로 정리해보려고 한다.