JavaScript 브라우저 객체 모델 BOM

브라우저 객체 모델 The Browser Object Model (BOM)

BOM은 공식적인 표준모델은 아니다.

하지만 대부분의 브라우저에서 같은 함수와 속성들을 사용할 수 있는 점 때문에 종종 언급된다.

---

윈도우 객체 The Window Object

window 객체는 모든 브라우저에서 사용할 수 있다. 이 객체는 브라우저 자체를 의미한다.

모든 전역 JavaScript 객체(objects), 함수(functions), 변수(variables)들은 자동적으로 window 객체의 멤버(하위요소 또는 자식요소)가 된다.

전역 변수(Global variables)는 window object의 속성(properties)에 해당한다.

전역 함수(Global functions)는 window object의 함수(methods)에 해당한다.

심지어 DOM(Document Object Model)도 window object의 프로퍼티(property)라고 할 수 있다.

window.document.getElementById("header");

위 예를 줄여서 아래처럼 쓰는 것이다.

document.getElementById("header");

---

윈도우 크기 Window Size

윈도우 사이즈를 구하는 방법은 세 가지의 다른 방법이 있다. 여기서 말하는 윈도우의 사이즈는 toolbars 영역과 스크롤바 영역은 해당하지 않는다.

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

• window.innerHeight - the inner height of the browser window
• window.innerWidth - the inner width of the browser window

For Internet Explorer 8, 7, 6, 5:

• document.documentElement.clientHeight
• document.documentElement.clientWidth
• or
• document.body.clientHeight
• document.body.clientWidth

아래는 모든 브라우저들을 지원하는 스크립트 예제이다.

Example

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Try it yourself »

 다시 말하지만 toolbars/scrollbars 영역은 사이즈에 포함되지 않는다.

---

또 다른 윈도우 함수들 Other Window Methods

• window.open() - 새 창 열기 open a new window
• window.close() - 현재창 닫기 close the current window
• window.moveTo() - 현재창 이동 move the current window
• window.resizeTo() - 현재창 사이즈 변경 resize the current window

Window Object Properties

Property	Description
closed	창의 닫힘 유무를 Boolean으로 반환
defaultStatus	window 상태바에 표시할 텍스트를 세팅할 수 있음
document	Document object 반환 (See Document object)
frames	모든 frames(iframes 포함) 을 배열로 반환
history	History object 반환 (See History object)
innerHeight	content 영역의 내부 높이를 반환 또는 설정
innerWidth	content 영역의 내부 넓이를 반환 또는 설정
length	frame (iframe 포함) 의 개수를 반환
location	Location object 반환 (See Location object)
name	window의 name 반환
navigator	Navigator object 반환 (See Navigator object)
opener	현재 window를 open한 부모 window 반환
outerHeight	toolbar/scrollbar를 포함한 window의 외부 높이를 반환 또는 설정
outerWidth	toolbar/scrollbar를 포함한 window의 외부 넓이를 반환 또는 설정
pageXOffset	현재 페이지의 좌상단을 기준으로 한 수직 스크롤이 된 위치의 X좌표를  반환
pageYOffset	현재 페이지의 좌상단을 기준으로 한 수평 스크롤이 된 위치의 Y좌표를  반환
parent	현재 window의 부모 window를 반환
screen	Screen object 반환 (See Screen object)
screenLeft	스크린(모니터)에서 window의 x 좌표를 반환
screenTop	스크린(모니터)에서 window의 y 좌표를 반환
screenX	스크린(모니터)에서 window의 x 좌표를 반환
screenY	스크린(모니터)에서 window의 y 좌표를 반환
self	현재 window 자신
status	window의 statusbar 에 텍스트를 설정
top	현재 window의 최상이 부모를 반환

Window Object Methods

Method	Description
alert()	OK button이 있는 알림창 표시
blur()	현재 window의 포커스를 제거
clearInterval()	setInterval()의 주기호출을 멈춤/제거
clearTimeout()	setTimeout()의 주기호출을 멈춤/제거
close()	window를 닫음
confirm()	OK 와 Cancel button 이 있는 알림창 표시
createPopup()	pop-up window를 만듬 (IE전용)
focus()	현재 window에 포커스 인
moveBy()	window의 위치를 변경
moveTo()	window의 위치를 변경
open()	새창 띄우기
print()	window에 내용 표시
prompt()	input이 있는 알림창 표시
resizeBy()	window의 크기 변경
resizeTo()	window의 크기 변경
scroll()	--
scrollBy()	스크롤을 움직임
scrollTo()	스크롤을 움직임
setInterval()	주기호출
setTimeout()	지정 시간 후에 함수 호출