[자바스크립트] - BOM이란?

1️⃣ BOM이란?

BOM(Browser Object Model)로 DOM이랑 비슷한 개념을 가지고 있다. 

DOM은 HTML 문서를 스크립트 언어로 제어하기 위해 객체화 한 것이라면 

BOM은 브라우저를 스크립트 언어로 제어하기 위해 객체화 한 것이다.

 

예를 들어 우리는 마우스와 같은 하드웨어 인터페이스로 뒤로가기 버튼을 누를 수 도 있고,

키보드를 통해 URL을 직접 이동할 수 있다. 

👉이와 비슷하게 마우스가 아닌 스크립트 언어로 브라우저를 제어할 수 있도록 객체화 한 것이 BOM이다.

 

2️⃣ Brower 객체의 종류

• window : 모든 객체가 소속된 객체이며, 브라우저 창을 의미한다.

window.open("https://google.com");
window.close();

window.alert("알림 창입니다.");
alert("알림 창입니다.");

❗window 객체는 최상위 객체이기 때문에 생략이 가능하다❗

 

• document : 현재문서에 대한 정보를 갖고 있는 객체를 의미한다.

document.querySelector("h1");
document.querySelector("h1").textContent = "안녕";

window.document.querySelector("h1").textContent = "안녕";

문서에 대한 정보를 가져와 프로퍼티나 메소드를 이용해 바꿀 수 있다. 

+ document도 window에 속한 객체이기 때문에 위와 같이 사용할 수 있지만 코드를 최소화 하기위해 안쓴다.

 

• history : 현재의 브라우저가 접근했던 URL history를 제어할 수 있다.

history.back()	// 뒤로 가기
history.forward() 	// 앞으로 가기

 

• location : 문서의 주소와 관련되 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티이다. 이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.

location.host		// 브라우저의 현재 주소
location.href = "https://google.com"	// 브라우저 이동

document.location.host
window.location.host

location 객체는 window 객체의 프로퍼티인 동시에 document의 프로퍼티 이기 때문에 위와 같이 사용할 수 있다.

 

• screen : 사용자의 디스플레이 화면에 대한 다양한 정보를 갖고있는 객체다.

screen 객체

• navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다. 크로스 브라우징 이슈를 해결할 때 사용할 수 있다. (예 : Chorme -> addEventListener , IE -> attachEvent)

navigator.geolocation.getCurrentPosition() 		// 현재 애플리케이션에 대한 위치정보
navigator.appName		// 앱(브라우저) 이름을 반환한다.
navigator.appVersion	// 앱(브라우저)에 대한 버전 정보를 반환한다.
navigator.userAgent 	// 서버에 요청할 때 앱(브라우저)에 대한 정보이다.