BOM은 자바스크립트가 브라우저 창과 주소, 기록 같은 브라우저 환경을 제어할 수 있도록 제공하는 객체 모델입니다.

브라우저 객체 모델(BOM)

브라우저 객체 모델(Browser Object Model, BOM)은 브라우저 환경을 자바스크립트가 제어할 수 있도록 객체 구조로 표현한 것이다. 영어로는 주로 약어 BOM으로 표현하고, 한국어로는 봄 또는 비오엠으로 읽는다.

BOM은 왜 필요할까?

왜 DOM만으로는 안 될까?

이런 동작을 생각해보자.

• 새 창을 연다
• 현재 주소를 바꾼다
• 뒤로 가기 / 앞으로 가기를 제어한다
• 사용자의 브라우저나 화면 정보를 확인한다

이런 동작은 div나 button 같은 HTML 요소를 조작하는 일이 아니라, 문서 바깥에 있는 브라우저 자체의 기능을 다루는 일이다. 그래서 문서를 다루는 모델과 별개로, 브라우저 환경 자체를 다룰 수 있는 모델이 필요했고, 그게 바로 BOM이다.

• DOM: 문서 구조와 요소를 다룬다
• BOM: 브라우저 창과 환경을 다룬다

즉, DOM과 BOM은 완전히 별개라기보다, 브라우저 환경에서 자바스크립트가 동작할 때 서로 다른 역할을 맡는 모델이라고 보면 된다. 그래서 BOM의 개념은 항상 DOM과 함께 설명된다.

window: BOM의 중심

BOM을 설명할 때 가장 먼저 나오는 객체는 window다.

window는 브라우저 창을 대표하는 객체이자, 브라우저 환경의 전역 객체다. 쉽게 말하면, 브라우저에서 자바스크립트를 실행할 때 가장 바깥에서 모든 것을 감싸고 있는 객체라고 보면 된다. 예를 들어 새 창을 여는 기능도 window가 제공한다.

window.open('https://example.com'); // 새 창 열기

그리고 window는 자바스크립트의 전역 객체(Global Object) 이기도 해서, 앞의 window.를 생략하고도 쓸 수 있다.

window.alert('hello'); // 경고창 띄우기
alert('hello'); // window 생략

window와 document의 관계

이전 글에서 DOM의 최상위 노드는 document라고 했다.

그런데 브라우저 환경에서 document 객체는 window의 프로퍼티다. 즉, 브라우저에서 document를 전역으로 바로 쓰는 것처럼 보이지만, 실제로는 window.document로 접근할 수 있다. (물론 window 생략 가능)

다만 이것은 객체 접근 경로에 대한 이야기일 뿐이다. document가 window 아래에 있다고 해서, DOM이 BOM의 하위 개념이라는 뜻은 아니다.

• window: 브라우저 환경 전체를 대표한다
• document: 그 안에서 현재 문서를 대표한다

BOM의 객체

BOM에는 여러 객체가 있지만, 자주 언급되는 대표 객체 몇 개만 먼저 정리해두면 충분하다.

[BOM의 대표 객체]

• location: 현재 문서의 URL과 관련된 정보를 담고 있다
• history: 브라우저의 방문 기록을 다룬다
• navigator: 현재 브라우저와 실행 환경에 대한 정보를 담고 있다
• screen: 사용자의 디스플레이 화면과 관련된 정보를 담고 있다