BOM (Browser Object Model) 정리

브라우저를 자바스크립트로 제어할 수 있도록 구성된 객체 모델입니다.
자바스크립트로 브라우저의 창, 문서, 주소, 이력 등 다양한 요소를 제어할 수 있어요.

window 객체

모든 BOM 객체의 최상위 객체이며, 브라우저 창을 의미합니다.

window.open('https://naver.com'); // 새 창 열기
window.close();                   // 현재 창 닫기
window.alert('경고창!');           // 경고창

※ window는 생략 가능 (예: alert())

document 객체

현재 웹 문서(DOM)에 대한 정보를 담고 있는 객체입니다.

<a id="link">클릭</a>

const link = document.querySelector('#link');
link.textContent = '변경된 텍스트';

history 객체

브라우저 방문 기록을 제어할 수 있습니다.

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

location 객체

현재 문서의 URL 정보 및 이동 기능을 제공합니다.

console.log(location.host);              // 호스트 출력
location.href = 'https://google.com';   // 페이지 이동

screen 객체

사용자의 디스플레이 정보(해상도, 너비, 높이 등)를 제공합니다.

console.dir(screen);

navigator 객체

브라우저와 관련된 정보 및 위치 정보를 제공합니다.

navigator.geolocation.getCurrentPosition((pos) => {
  console.log(pos.coords.latitude);
  console.log(pos.coords.longitude);
});

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

참고

• 짐코딩 인프런 강의: https://www.inflearn.com/course/자바스크립트-중급/dashboard