[JavaScript] Browser Object Model(BOM)

Browser Object Model(BOM)이란?

웹 개발에서 BOM이란, 웹 브라우저가 제공하는 객체들의 집합으로, 웹 페이지와 브라우저 환경 간의 상호작용을 가능하게 한다. BOM은 표준화되어 있지 않아 브라우저마다 세부적인 구현 방식이 다를 수 있지만, 대부분의 브라우저는 BOM의 주요 기능을 비슷하게 지원한다. 개발자는 BOM을 사용함으로써 웹페이지의 콘텐츠 바깥에 있는 브라우저 관련 요소(browser-specific element)들에 접근 및 제어할 수 있다(이는 웹 문서의 콘텐츠에 집중하는 Document Object Model(DOM)과는 다른 점이다).

 

BOM의 특징

1. HTML 및 DOM과의 차이
   • BOM은 브라우저 창(window)과 관련된 기능을 제공하며, HTML 구조 및 내용에 직접적으로 영향을 미치는 DOM(Document Object Model)과는 다르다.
2. 표준화 부족
   • DOM과 달리 BOM은 명확한 표준이 없어 브라우저마다 구현 방식이 조금씩 다를 수 있다.
3. 확장성
   • BOM은 브라우저의 확장 기능(API)과 연결되어 다양한 작업(ex: 네트워크 상태 확인, 브라우저 저장소 관리 등)을 지원한다.

 

주요 구성 요소

BOM은 주로 브라우저 창(window)과 관련된 객체들로 구성되며, 아래와 같은 주요 객체와 기능을 포함한다:

1. window 객체

• 브라우저 창(또는 탭)을 대표하는 최상위 객체.
• BOM의 핵심으로, 다른 모든 객체는 window 객체의 하위 속성으로 접근 가능하다.
• 주요 메서드 및 속성:
  • 창 관리: window.open(), window.close()
  • 알림: window.alert(), window.confirm(), window.prompt()
  • 타이머: setTimeout(), setInterval(), clearTimeout(), clearInterval()
  • 위치 정보: window.location
• 문서 링크: https://developer.mozilla.org/ko/docs/Web/API/Window

Window - Web API | MDN

 

2. location 객체

• 현재 문서의 URL 정보를 제공하고, URL을 변경하거나 새 페이지로 이동하는 데 사용된다.
• 주요 속성:
  • location.href: 현재 URL
  • location.hostname: 호스트 이름
  • location.pathname: 경로 이름
  • location.search: 쿼리 문자열
• 문서 링크: https://developer.mozilla.org/ko/docs/Web/API/Location

Location - Web API | MDN

 

3. navigator 객체

• 브라우저 및 사용자 환경에 대한 정보를 제공한다.
• 주요 속성:
  • navigator.userAgent: 브라우저의 User-Agent 문자열
  • navigator.language: 사용자 언어
  • navigator.geolocation: 위치 정보 접근
  • navigator.onLine: 온라인 상태 확인
• 문서 링크: https://developer.mozilla.org/ko/docs/Web/API/Navigator

Navigator - Web API | MDN

 

4. history 객체

• 브라우저의 세션 기록을 관리한다.
• 주요 메서드:
  • history.back(): 이전 페이지로 이동
  • history.forward(): 다음 페이지로 이동
  • history.go(n): 특정 위치의 기록으로 이동
• 문서 링크: https://developer.mozilla.org/ko/docs/Web/API/History_API

History API - Web API | MDN

 

5. screen 객체

• 사용자의 디스플레이와 관련된 정보를 제공한다.
• 주요 속성:
  • screen.width: 화면 너비
  • screen.height: 화면 높이
  • screen.availWidth: 사용 가능한 화면 너비
  • screen.availHeight: 사용 가능한 화면 높이
• 문서 링크: https://developer.mozilla.org/en-US/docs/Web/API/Window/screen

Window: screen property - Web APIs | MDN

 

예제

// 현재 페이지 URL 확인
console.log(window.location.href);

// 새 창 열기
let newWindow = window.open("https://www.example.com", "_blank");

// 페이지 새로고침
window.location.reload();

// 사용자 브라우저 정보 출력
console.log(navigator.userAgent);