10. 브라우저 객체 모델(BOM)

with 최정균

웹 '브라우저' 전체를 객체로 관리하는 것을 '브라우저 객체 모델(Browser Object Model)' 이라고 한다. 줄여서 BOM 이라고 한다.

최상위에 있는 Window 객체를 시작으로 하는 객체 모델 계층도 이다.

1.웹 브라우저를 제어하는 Window 객체

속	설
document	브라우저 창에 표시된 웹 문서에 접근할 수있다.
innerHeight	내용 영역의 높이를 나타낸다.
innerWidth	내용 영역의 너비를 나타낸다.
outerHeight	브라우저 창의 바깥 높이를 나타낸다.
outerWidth	브라우저 창의 바깥 너비를 나타낸다.

Window 객체의 몇 가지 속성을 적어 보았다.

다음은 Window 객체의 함수 알아보기

함	설
alert()	알림 창(Alert Dialog)을 표시한다.
moveBy()	현재 창을 지정한 크기 만큼 이동한다.
moveTo()	현재 창을 지정한 좌표로 이동한다.
resizeBy()	지정한 크기만큼 현재 창 크기를 조정한다.
resizeTo()	동적으로 브라우저 창의 크기를 조정한다.

2.브라우저 정보가 담긴 Navigator 객체

렌더링 엔진이란?

Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류를 구별한다. 렌더링 엔진이란 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램 이다.

속	설
appCodeName	브라우저 이름을 문자열로 반환한다.
appName	브라우저 공식 이름을 문자열로 반환한다.
userAgent	현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환한다.

속성의 일부만 적어 보았다.

3.그 밖의 브라우저 객체들

3-1)History 객체 간단히 살펴보기

History 객체에는 브라우저에서 '뒤로', '앞으로' 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소가 저장되어 있다. 이 객체에서 사용할 수 있는 함수는 방문하면서 History 객체에 저장된 URL을 앞뒤로 이동하는 것이다.

속성	설
length	현재 브라우저 창의 목록에 있는 항목의 개수, 즉 방문한 사이트 개수를 반환한다.

함	설
back()	History 목록에서 이전 페이지를 현재 화면에 불러온다
forward()	History 목록에서 다음 페이지를 현재 화면에 불러온다
go()	History 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history(-1)은 이전 페이지를 불러온다.

3-2)Location 객체 간단히 살펴보기

Location 객체는 이름에서도 알 수 있듯이 브라우저의 주소 표시줄과 관련되어 있다. 즉 현재 문서의 URL 주소 정보를 가지고 있는데, 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있다.

속성	설
hash	URL중 #로 시작하는 해시 부분을 나타냄
host	URL의 호스트 이름과 포트 번호를 나타낸다
hostname	URL의 호스트 이름을 나타낸다.
href	전체 URL 이다. 이 값을 변경하면 해당 주소로 이동할 수 있다.

함	설명
assign()	현재 문서에 새 문서 주소를 할당해 새 문서를 가져온다.
reload()	현재 문서를 다시 불러온다. 브라우저의 [새로 고침]과 같은 역할을 한다.
replace()	현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다.
toString()	현재 문서의 URL을 문자열로 반환한다.

3-3)Screen 객체 간단히 살펴보기

웹 사이트에 접속하는 사용자의 화면 크기는 모두 다른데, 화면 크기나 정보를 알고 싶다면 Screen 객체를 사용하며 ㄴ된다.

속	설명
availHeight	화면에서 윈도우의 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분의 높이를 나타낸다.
availWidth	UI 영역을 제외한 부분의 너비를 나타낸다.
colorDepth	화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타낸다.
height	UI 영역을 포함한 화면의 높이를 나타낸다.

함	설명
lockOrientation()	화면 방향을 잠근다.
unlockOrientation()	화면 방향 잠금을 해제한다.