브라우저 객체 모델(Browser Object Model)이란 스크립트 언어로 웹 브라우저를 제어하기 위해 웹 브라우저를 객체화한 것이다. 때문에 BOM을 브라우저를 제어하기 위한 인터페이스라고도 한다. BOM에는 6가지 종류가 있는데 window, document, history, location, screen, navigator가 그것이다. 여기서 window는 브라우저창 전체를 의미한다. 모든 객체들이 소속되어 있는 가장 큰 객체이다.
// 새 창으로 naver 열기
window.open('https://www.naver.com')
// 현재 창 닫기
window.close()
// 경고창 띄우기
window.alert('경고창')
// 같은 코드
alert('경고창')위의 자바스크립트 코드를 사용하면 새 창을 열거나 닫는 브라우저창 제어가 가능하며 경고창을 띄우는 등의 행위도 가능하다. 여기에서 "window"의 경우 생략이 가능하다. document는 현재 웹페이지 상에 나타나있는 문서의 정보를 가지고 있는 객체이다. 웹 문서가 페이지에 표시될 때 html이 DOM으로 변환이 된다. 따라서 document객체의 경우 DOM에 대한 정보를 가지고 있는 것이다. 따라서 document에서 제공하고 있는 메서드를 통해서 DOM객체를 가지고 와서 제어할 수 있다.
// custom-id 라는 id 속성값을 가지고 있는 태그 가지고 오기
document.querySelector('#custom-id')
// 해당 태그의 텍스트 변경하기
document.querySelector('#custom-id').textContent = '원하는 텍스트'
위의 코드에도 역시 "window."이라는 구문이 생략되어 있는 상태다. document객체를 사용하면 위와 같이 css 선택자를 사용해서 특정 태그를 가지고 오고, 그 태그를 이용해서 제어가 가능하다. history의 경우 브라우저를 통해 접근했던 URL 들의 history를 제어할 수 있는 객체이다. 브라우저에 있는 뒤로 가기, 앞으로 가기를 생각하면 쉽게 와닿는다.
// 뒤로가기
history.back()
// 앞으로가기
history.forward()history객체를 사용해서 페이지를 이전, 앞으로 이동할 수 있도록 해준다. location은 window 객체의 프로퍼티이면서 document 객체의 프로퍼티이다. 문서의 주소와 관련이 있으며 이를 통해 문서의 URL을 변경하거나 위치와 관련한 다양한 정보를 얻을 수 있다.
// 현재 페이지의 호스트를 알고싶을 때
location.host
// 특정 URL로 이동하고 싶을 때
location.href = 'https://www.naver.com'위에서 알 수 있듯이 location은 웹 문서의 URL에 대한 내용을 가지고 있는 객체라고 확인 가능하다. screen 객체는 사용자가 사용하는 디스플레이 화면에 대한 정보들을 가지고 있는 객체이다. 휴대폰화면, 컴퓨터모니터 등 다양하게 바뀔 수 있다.
// 현재 스크린에 대한 정보를 알고싶을 때
console.dir(screen)
"console.dir"을 이용해 screen 정보를 출력하면 위의 이미지와 같은 내용이 출력된다. navigator의 경우 현재 사용되고 있는 브라우저 자체에 대한 정보를 알 수 있다. 크로스 브라우징 이슈가 발생했을 때 이를 해결하는 데 사용한다.
// 현재 애플리케이션에 대한 위치 정보
navigator.geolocation.getCurrentPosition()
// 애플리케이션(브라우저) 이름 반환
navigator.appName
// 애플리케이션(브라우저)에 대한 버전 정보 반환
navigator.appVersion
// 서버 요청 시 애플리케이션(브라우저)에 대한 정보
navigator.userAgent다양한 속성들과 메서들을 더 확인하는 것은 MDN 사이트에서 가능하다!
학습 페이지
www.inflearn.com
댓글