본문 바로가기
프로그래밍/JavaScript

JavaScript 브라우저 객체 모델 BOM

by zoo10 2013. 1. 5.

브라우저 객체 모델 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

PropertyDescription
closed창의 닫힘 유무를 Boolean으로 반환
defaultStatuswindow 상태바에 표시할 텍스트를 세팅할 수 있음
documentDocument object 반환 (See Document object)
frames모든 frames(iframes 포함) 을 배열로 반환
historyHistory object 반환 (See History object)
innerHeightcontent 영역의 내부 높이를 반환 또는 설정
innerWidthcontent 영역의 내부 넓이를 반환 또는 설정
lengthframe (iframe 포함) 의 개수를 반환
locationLocation object 반환 (See Location object)
namewindow의 name 반환
navigatorNavigator object 반환 (See Navigator object)
opener현재 window를 open한 부모 window 반환
outerHeighttoolbar/scrollbar를 포함한 window의 외부 높이를 반환 또는 설정
outerWidthtoolbar/scrollbar를 포함한 window의 외부 넓이를 반환 또는 설정
pageXOffset현재 페이지의 좌상단을 기준으로 한 수직 스크롤이 된 위치의 X좌표를  반환
pageYOffset현재 페이지의 좌상단을 기준으로 한 수평 스크롤이 된 위치의 Y좌표를  반환
parent현재 window의 부모 window를 반환
screenScreen object 반환 (See Screen object)
screenLeft스크린(모니터)에서 window의 x 좌표를 반환
screenTop스크린(모니터)에서 window의 y 좌표를 반환
screenX스크린(모니터)에서 window의 x 좌표를 반환
screenY스크린(모니터)에서 window의 y 좌표를 반환
self현재 window 자신
statuswindow의 statusbar 에 텍스트를 설정
top현재 window의 최상이 부모를 반환

Window Object Methods

MethodDescription
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()지정 시간 후에 함수 호출

'프로그래밍 > JavaScript' 카테고리의 다른 글

JavaScript History 객체  (0) 2013.01.05
JavaScript Location 객체  (0) 2013.01.05
JavaScript 스크린 객체  (0) 2013.01.05
JavaScript Navigator 객체  (0) 2013.01.05
JavaScript 수학 객체 Math  (0) 2013.01.05
JavaScript 논리 객체, boolean  (0) 2013.01.05
JavaScript 문자열 객체  (1) 2013.01.04
JavaScript 반복문 For  (0) 2013.01.04