BOM

Browser Object Model

BOM

Browser Object Model

Browser를 제어하기 위한 Interface이다.

Browser를 객체화해서 JavaScript 같은 Script언어로 제어가 가능하다.

Browser 객체들을 대해서 살펴보려 한다.

window

Browser 창 자체를 의미한다.가장 최상위 객체로 다른 객체를 포함한다.JavaScript에서 window는 노출된 전역 변수로 현재 Browser 창을 의미한다.

// window 실습
window.open('https://google.com') // 새로운 구글 Browser 창 생성
window.alert('test') // alert 창 생성

// window 생략 가능
open('https://google.com') // 새로운 구글 Browser 창 생성
alert('test') // alert 창 생성

document

현재 문서에 대한 정보를 가진 객체이다.

Dom Tree의 진입점 역할을 한다.

document는 window 객체에 소속되어 있다.

// document 실습
document.querySelector('#custom-id') // 해당 id값 Tag 호출
document.querySelector('#custom-id').textContent = 'change' // 해당 id값 Tag의 text 변경

history

history 객체를 통해 현재 Browser Session의 URL history 제어가 가능하다.

// history 실습
history.back() // 이전 Page로 이동
history.forward() // 앞 Page로 이동

location

문서의 주소와 관련된 객체이다.문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.window 객체의 Property면서 document 객체의 Property이다.(window.location == document.location)

// location 실습
location.host // Page의 host 정보 return
location.href = 'https://google.com' // 문서의 주소 변경

screen

User의 디스플레이 화면에 대한 정보를 갖고 있는 객체이다.

navigator

실행 중인 Browser에 eogks 정보를 갖고 있는 객체이다.

[참고사이트]

Window - Web API | MDN

 

Document - Web API | MDN

History - Web API | MDN

 

Location - Web API | MDN

 

Screen - Web API | MDN

Navigator - Web API | MDN