BOM 이란?

BaeSeong-min·2025년 1월 9일

프론트엔드 지식

목록 보기

2/9

📁BOM 이란?

BOM은 Browser Object Model의 (브라우저 객체모델)약어로, 자바스크립트 언어로 브라우저 자체를 제어하기 위해서 브라우저를 객체화한 것이다.

마우스라는 하드웨어 인터페이스를 통해서 브라우저의 새 탭을 열거나, 주소 표시줄에 다른 주소를 입력해서 웹 문서를 이동할 수 있다. 이러한 기능을 브라우저를 객체화함으로써 자바스크립트로도 제어가 가능하다.

🚀 DOM은 객체화된 문서, BOM은 객체화된 브라우저

📁BOM이 제공하는 객체

📂window

window는 모든 객체가 소속된 객체이며, 브라우저 창 자체를 의미한다.
window 객체는 생략이 가능하다.

🔽새 탭 열기

window.open("https://google.com"); // 구글 페이지를 새 탭으로 열어준다.

🔽탭 닫기

window.close(); // 현재 탭을 닫아준다.

🗂️window는 생략 가능

🔽새 탭 열기

open("https://google.com"); // 구글 페이지를 새 탭으로 열어준다.

📝모든 객체가 소속된 객체라는 말의 한계

window 객체는 브라우저 환경에서 제공하는 BOM 및 DOM이 제공하는 객체 중에서 최상위 객체이다.

console.log(window.document);  // DOM의 document 객체 (DOM 요소)
console.log(window.location);  // BOM의 location 객체
console.log(window.navigator); // BOM의 navigator 객체

반면, 자바스크립트 모든 객체는 Object.prototype을 상속받는다.

추가로, window는 자바스크립트 내장 객체가 아니다. 브라우저가 제공하는 API인 BOM을 자바스크립트가 이용해서 window 객체를 사용하기 때문이다. 정확하게는 브라우저 환경에서 제공하는 BOM의 핵심 객체이다.

📂document

HTML 문서는 브라우저의 렌더링 엔진에 의해 해석되면서 객체화된다.
document 객체는 DOM에 대한 정보를 갖고 있는 객체이다.

🔽DOM 요소 가져와서 텍스트 바꾸기

let domObject = document.querySelector(CSS 선택자);
domObject.textContent = "제어합니다.";

querySelector() 메서드의 인자로 CSS 선택자를 넣어주면, DOM에서 해당 선택자와 첫 번째로 일치하는 DOM 요소를 반환한다. 일치하는 DOM 요소가 없다면 null을 반환한다.

🔽window 객체는 BOM 및 DOM의 객체 중에서 최상위 객체

window.document // window 객체는 생략 가능하기에 코드를 줄이기 위해 생략하는 것이 좋음.

📂history

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

🔽뒤로 가기

history.back();

🔽앞으로 가기

history.forward();

📂location

문서의 주소와 관련된 객체이다. 다시말해, 웹 문서 URL에 대한 정보를 갖고 있다. 따라서, location 객체를 이용해서 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. 그리고, window 객체의 프로퍼티인 동시에 document 객체의 프로퍼티이다.

🔽홈페이지의 호스트 가져오기

location.host; // 예시) 'www.naver.com'

호스트 이름은 인터넷에서 특정 서버를 식별하기 위한 도메인 이름이다.

🔽웹 문서의 주소 바꾸기

location.href = "https://google.com";

사용자가 현재 보고 있는 페이지에서 "https://google.com"으로 이동하게 만든다.

📂screen

사용자의 디스플레이 화면에 대한 다양한 정보를 갖고 있는 객체이다. 사용자의 디스플레이 화면이라 함은 핸드폰 혹은 컴퓨터와 같이 무엇으로 보느냐에 따라 디스플레이가 달라진다.

🔽사용자 디스플레이 화면에 대한 정보 받기

console.dir(screen);

console.dir()을 사용해서 객체를 효율적으로 출력할 수 있다.

📂navigator

실행중인 애플리케이션(브라우저)에 대한 정보를 얻을 수 있다.

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

🗂️getCurrentPosition() 메서드 사용하는 방법

getCurrentPosition(success, error, options)

success는 위치 정보를 성공적으로 받아왔을 때 호출되는 콜백함수이다. 콜백함수의 매개변수로는 사용자의 현재 위치에 대한 정보(위도, 경도, 정확도 등)를 포함한 객체가 전달된다.

error는 위치 정보를 얻는데 실패했을 때 호출되는 콜백함수이다. 콜백함수의 변수로는 오류에 대한 정보를 담고 있는 error 객체가 전달된다.

options는 위치 정보를 요청할 때 사용할 옵션을 지정하는 객체이다. 위치 정보의 정확도, 최대 대기 시간 등 여러 속성을 설정할 수 있다.

🔽위치 정보 가져오기

navigator.geolocation.getCurrentPosition(function (pos) {
  const crd = pos.coords;
  console.log("Your current position is:");
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
})