[JavaScript]브라우저 객체 모델(BOM)

JS의 여러 객체 중 브라우저를 표현하는 브라우저 객체 모델(BOM;Browser Object Model), 문서 구조를 표현하는 문서 객체 모델(DOM;Document Object Model)이 있다. 그중 BOM은 계층형 구조라서, 최상위 객체인 window 밑에 location, history, navigator 등의 객체를 말한다. 이 window의 하위 객체들을 쓸 때는 window 코드를 생략하는 것도 가능하고, BOM 역시 onclick 이벤트로 사용할 수 있다.

 

브라우저 객체 모델(BOM)

BOM은 기본적으로 window.BOM.하위객체.속성(또는 기능) 순서로 작성하는데, 무엇을 출력하는지에 따라 방법은 다양하다. 하위 객체 없이 window만 쓰는 경우도 있고, 하위 객체가 여럿일 수도 있다. 예를 들어 window.open() 는 하위 객체 없이 window.기능 방식으로 쓴 것이며, navigator.userAgent 는 window를 생략하고 하위객체.속성 방식으로 작성한 것이다.

아래는 window 객체 기능과 navigator 객체 속성의 예시다. open( ); 안에 "주소"만 쓰면 새 창 형식으로 페이지가 열리는데, "주소, 창 이름, 창 옵션" 형태로 쓰면 팝업창을 열 수 있다. 그리고 close는 이 창을 닫겠다는 의미다. 또한 navigator.userAgent 는 페이지 방문자(클라이언트)의 브라우저 및 운영체제 정보를 확인시켜준다.

여기서 팝업창을 열고 나서 창 닫기를 누르면 BOM 페이지만 종료된다.

 

location 객체

location 객체의 속성으로는 주소값(location.href), 프로토콜 방식(location.protocol), 호스트(location.host), 호스트명(location.hostname), 포트번호(location.port)가 있고, 기능으로는 페이지를 이동하는 location.href=(); 가 있다. 아래는 그 예시를 작성한 것이다.

이렇게 하면 location 속성 버튼을 눌렀을 때 경고창 형식으로 각각의 정보가 출력되며, 페이지 이동을 누르면 BOM 페이지로 이동된다.

 

history 객체

history 객체는 페이지 이동의 과거력을 나타내며, 속성으로 히스토리 길이(history.length)가 있다. 기능으로는 history.back(), history.forward(), history.go(숫자) 가 있는데, 각각 뒤로 가기, 앞으로 가기, 숫자(length)만큼 뒤로 또는 앞으로 가기를 말한다. 이 객체에서는 history.length가 1일 때, 즉 페이지 이동이 없었을 때는 갈 페이지가 존재하지 않기 때문에 기능을 쓰지 못한다. 아래 코드는 두 페이지를 연결해서 작성한 예시다.

여기서 forward()와 go(1)이 똑같고, back()과 go(-1)이 똑같다. go( ) 안에 다른 숫자를 쓰면 그만큼 페이지가 넘어가게 된다. 그리고 하이퍼링크를 통해 페이지를 이동시키면 history.length가 올라가지만, 뒤로 가거나 앞으로 가면 그대로 유지된다. 동작하면서 계속 history 속성 버튼을 눌러 확인할 수 있다.