JavaScript _ 브라우저 객체 모델

브라우저 객체 모델(BOM)이란? 웹 브라우저와 관련된 객체의 집합!

출처 : https://sharryhong.github.io/2016/12/28/javascript-bom/

그림처럼 최상위의 window, 하위의 location, navigator, history, screen, document 객체가 있다!

이중 document 객체와 관련된 객체의 집합을 DOM이라 부르는 것!

 

1. window 객체

브라우저 기반 js의 최상위 객체인 window 객체!

 

open() 메서드를 통해 새로운 window 객체를 생성할 수 있으며, 만들어진 객체에 접근할 수도 있다.

 

역시나 다양한 기본 메서드를 제공하고 있으며, 위 예시처럼 작성하면...

새로운 window 객체가 뜨며, 1초마다 왼쪽으로 10px 아래쪽으로 10px씩 이동한다! 

참말로 신기하고만.

 

2. screen 객체

다음은 운영체제 화면의 속성을 가지는 screen 객체!

예시처럼 screen 객체의 모든 속성을 출력해보면...

아하! width와 height 속성을 가장 많이 사용한다고 한다.

 

3. location 객체

주소 표시줄과 관련된 location 객체!

마찬가지로 모든 속성을 출력해보면...

아하!

 

locationn 객체는 주로 페이지를 이동하는 데 사용된다!

역시 예시처럼 assign과 replace를 통해 이동할 URL을 지정해주면...

해당 주소로 이동하게 된다! 와우!!

 

4. navigator 객체

브라우저에 대한 정보를 가진 navigator객체.

요 녀석을 이요해 모바일 장치를 구분할 수도 있다!

 

역시나 모든 속성을 출력해보면...

아항!