[JS] BOM (Browser Object Model)

artp·2025년 4월 10일

BOM

javascript

목록 보기

2/50

브라우저 객체 모델(Browser Object Model, BOM)은 자바스크립트가 웹 페이지가 아닌, 웹 브라우저 자체를 제어할 수 있도록 제공하는 객체 집합입니다.

1. BOM이란?

BOM은 HTML 문서(DOM)와는 달리, 브라우저 자체를 제어하기 위한 API입니다.
BOM은 다음과 같은 작업들을 가능하게 해줍니다.

작업 예시

새 창 열기
현재 주소(URL) 읽기/변경
브라우저 기록(history) 제어
사용자 환경 정보 수집 (브라우저, OS 등)
화면 해상도 정보 확인

2. BOM = window 객체

브라우저는 자바스크립트에게 브라우저를 제어할 수 있는 다양한 기능(API)을 제공합니다.
이 기능들은 전부 전역 객체인 window 안에 포함되어 있으며,
우리는 window 객체를 통해 브라우저의 주소 정보, 사용자 정보, 화면 크기, 히스토리 등을 다룰 수 있습니다.

즉, BOM은 자바스크립트가 브라우저와 소통할 수 있게 해주는 창구 역할을 하는 API 집합이며,
그 창구가 바로 window 객체입니다.

BOM을 이해하는 것은 window 객체의 프로퍼티와 메서드의 사용법을 배우는 것과 거의 같다고 볼 수 있습니다.

console.log(window.innerWidth);	// 브라우저 창 너비
window.alert("Hello!");			// 경고창 띄우기

참고로 window.는 생략이 가능해서 보통 alert()처럼 쓰지만, 실제로는 전부 window의 속성입니다.

3. BOM의 대표적인 객체

3.1 window

브라우저 창 전체를 대표하는 객체
자바스클비트의 최상위 전역 객체
alert(), setTimeout(), document, console 등 대부분의 기능이 여기에 포함됨

window.alert("알림!");
window.open("https://naver.com");
console.log(window.innerWidth, window.innerHeight);

3.2 location

현재 페이지의 URL 정보를 다룸
주소를 가져오거나, 변경하거나, 리다이렉트할 수 있음

console.log(location.href); // 현재 주소
location.href = "https://google.com"; // 페이지 이동

3.3 navigator

사용자의 브라우저와 운영체제 정보를 제공
사용자 에이전트 문자열이나 언어 설정 등을 확인할 수 있음

console.log(navigator.userAgent);	// 브라우저 정보
console.log(navigator.language);	// 브라우저 언어

3.4 screen

사용자의 모니터 해상도 정보 제공

console.log(screen.width);	// 화면 너비
console.log(screen.height);	// 화면 높이

3.5 history

브라우저의 방문 기록을 제어
사용자를 이전/다음 페이지로 이동시킬 수 있음

history.back();		// 뒤로 가기
history.forward();	// 앞으로 가기
history.go(-1);		// 한 단계 뒤로

4. BOM 구조

브라우저 환경
├── JavaScript Core (언어 자체 기능)
├── BOM (Browser Object Model)
│   └── window
│       ├── alert(), setTimeout()
│       ├── location
│       ├── navigator
│       ├── screen
│       ├── history
│       └── document  ← 이게 DOM API의 진입점
└── DOM (Document Object Model)
    └── document
        ├── getElementById()
        ├── querySelector()
        └── ...