Front-end/JavaScript

자바스크립트 브라우저 객체 모델(BOM)

NiceKHJ 2024. 8. 13. 12:32

브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체들의 모음입니다. BOM을 통해 개발자는 브라우저와 상호작용하고, 웹 페이지 외부의 브라우저 기능을 제어할 수 있습니다.

 

1. Window 객체

Window 객체는 BOM의 핵심이며 브라우저 창을 나타냅니다. 모든 전역 JavaScript 객체 , 함수 , 변수 는 자동으로 Window 객체의 멤버가 됩니다.

 

주요 프로퍼티와 메서드 

  • window.innerHeight , window.innerWidth : 브라우저 창의 내부 높이와 너비
  • window,open() , window.close() : 새창 열기와 닫기
  • window.alert() , window.prompt() , window.confirm() : 대화 상자 표시

 

2. Navigator 객체

Navigator 객체는 브라우저에 대한 정보를 제공합니다.

 

주요 프로퍼티

  • navigator.userAgent : 브라우저의 사용자 에이전트 문자열
  • navigator.language : 브라우저의 언어
  • navigator.onLine : 브라우저의 온라인 상태

 

 

3. Location 객체

Location 객체는 브라우저의 주소 표시줄과 관련된 정보를 제공하고 제어합니다.

 

주요 프로퍼티와 메서드 

  • location.href : 현재 페이지의 전체 URL
  • location.hostname : 웹 호스트의 도메인 이름
  • location.pathname : 현재 페이지의 경로와 파일 이름
  • location.reload() : 현재 페이지를 새로고침

 

 

4. History 객체

History 객체는 브라우저의 방문 기록에 접근할 수 있게 해줍니다.

 

주요 메서드

  • history.back() : 이전 페이지로 이동
  • history.forward() : 다음 페이지로 이동
  • history.go(n) : 특정 페이지로 이동 (n은 상대적인 위치)

 

 

5. Screen 객체

Screen 객체는 사용자의 화면에 대한 정보를 제공합니다.

 

주요 프로퍼티

  • screen.width , screen.height : 화면의 전체 너비와 높이
  • screen.availWidth , screen.availHeight : 사용 가능한 화면 너비와 높이