[JavaScript] 브라우저 객체 모델 BOM (Browser Object Model)

BOM : 브라우저 객체 모델

브라우저 객체 모델은 말 그대로 브라우저를 객체화한 것을 말한다. 브라우저를 스크립트 언어로 제어하기 위한 인터페이스라고 말하기도 한다. 마우스 클릭으로 브라우저의 새 탭을 여는 것처럼 스크립트 언어로 브라우저를 제어하는 것이다.

 

브라우저 객체의 종류

1. window : 모든 객체가 소속된 객체이며, 브라우저 창을 의미한다.

window.open('https:/google.com')
window.close()
window.alert('hi!')

 

개발자도구 콘솔창에서 window.open()에 URL을 입력하면, 새 탭에서 해당 페이지가 열리고, window.close()를 입력하면 닫힌다.

 

우리가 자주 사용하는 alert()은 window가 가지고 있는 메소드이며, window.alert()이 정확한 표현이다. window. 은 생략 가능하다.

 

자바스크립트에서는 함수도 객체이고, window는 모든 객체가 소속된 객체라고 볼 수 있다.

 

2. document : 현재 문서에 대한 정보를 갖고 있는 객체이다.

document.querySelector('#id').textContext = '텍스트'

 

HTML문서는 브라우저에 의해 해석되면서 DOM 트리로 변환되는데, document 는 이런 DOM에 대한 정보를 가지고 있다. 따라서 document 객체를 통해 DOM객체에 접근할 수 있다.

 

document 객체도 결국 window 객체 소속이기 때문에 window.document로 사용할 수 있으나, 편의성을 위해 생략하여 사용하는 경우가 많다.

 

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

history.back()
history.forward()

 

스크립트 언어로 앞뒤에 접근했던 URL로 이동할 수 있다.

 

4. location  : 문서의 주소와 관련된 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티이다.
이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.

//window.location / document.location / (window. 생략하고) location 모두 가능

location.host
location.href = 'https://google.com

 

5. screen : 사용자의 디스플레이 화면에 대한 다양한 정보를 갖고있는 객체이다.

휴대폰, 태블릿, 모니터 등 디스플레이가 다양하다.

console.log() : 텍스트 출력에 효율적
console.dir() : 객체 출력에 효율적

console.dir(screen) //width, height, pixelDepth 등 다양한 정보를 조회할 수 있다.

 

6. navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다.
크로스 브라우징 이슈를 해결할 때 사용할 수 있다. (예 : Chrome -> addEventListener, IE -> attachEvent)

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

---

이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.

[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 | 짐코딩 - 인프런