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

 

BOM (Browser Object Model, 브라우저 객체 모델)은 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어하고자 할 때 사용할 수 있는 객체 모델입니다.

 

 

목차

 

 

Navigator 객체

브라우저와 관련된 정보를 관리하는 객체입니다.

 

Navigator 객체 프로퍼티

프로퍼티	설명
appName	브라우저의 이름을 리턴
appVersion	브라우저의 버전을 리턴
cookieEnabled	브라우저의 쿠키 사용여부를 리턴
language	브라우저의 language를 리턴
onLine	브라우저의 online 여부를 리턴
product	브라우저의 engine명을 리턴
userAgent	서버에서 브라우저에 보내진 user-agent 헤더정보를 리턴

console.log("브라우저 이름", navigator.appName);
console.log("브라우저 버전", navigator.appVersion);
console.log("쿠키사용여부", navigator.cookieEnabled);
console.log("브라우저 언어", navigator.language);
console.log("브라우저 onLine", navigator.onLine);
console.log("브라우저 엔진", navigator.product);
console.log("헤더정보", navigator["userAgent"]);

 

 

 

Screen 객체

브라우저 화면(screen) 정보를 관리하는 객체입니다.

 

Screen 객체 프로퍼티

프로퍼티	설명
availHeight	screen의 높이를 리턴 ( taskbar 제외 )
availWidth	screen의 너비를 리턴 ( taskbar 제외 )
height	screen의 높이를 리턴 ( taskbar 포함 )
width	screen의 너비를 리턴 ( taskbar 포함 )

console.log(screen.width, screen.height);
console.log(screen.availWidth, screen.availHeight);

 

 

 

History 객체

사용자가 방문한 URL의 히스토리를 관리하는 객체입니다.

 

History 객체 프로퍼티/메소드

프로퍼티/메소드	설명
length	히스토리 리스트에 저장된 URL의 개수
back()	히스토리 리스트에서 이전 URL을 로드
forward()	히스토리 리스트에서 다음 URL을 로드
go(number|URL)	히스토리 리스트에서 명시된 위치의 URL을 로드

<!-- history01.html -->
history01.html 페이지 입니다.<br>
<a href="history02.html">next</a>

<!-- history02.html -->
<!-- script 부분 -->
<script type="text/javascript">
function back() {
	history.back(); //이전페이지로 이동
}
</script>
<!-- body 부분 -->
history02.html 페이지 입니다.<br>
<a href="javascript:back()">이전으로</a><br>
<a href="history03.html">next</a>

<!-- history03.html -->
<!-- script 부분 -->
<script type="text/javascript">
document.write(history.length+"<br>"); //지금까지 이동한 페이지 개수
function back() {
	history.back(); //이전페이지로 이동
}
function home() {
	history.go(-2); //내 위치에서 두 단계 이전으로
}
</script>
<!-- body 부분 -->
history03.html 페이지 입니다.<br>
<a href="javascript:back()">이전으로</a><br>
<a href="javascript:home()">첫화면으로</a>

 

 

 

Location 객체

현재 URL에 관한 정보를 관리하는 객체입니다.

 

Location 객체 프로퍼티/메소드

프로퍼티/메소드	설명
host	현재 URL의 포트번호,호스트명을 리턴하거나 설정
href	전체 URL 정보를 리턴하거나 설정
hostname	현재 URL의 호스트명을 리턴하거나 설정
origin	현재 URL의 포트번호,호스트명, 프로토콜을 리턴
port	현재 URL의 포트번호를 리턴하거나 설정
protocol	현재 URL의 프로토콜을 리턴하거나 설정
assign(URL)	새로운 문서를 로드
reload([false|true])	현재 문서를 리로딩 false : 캐시로부터 리로딩 (default) true : 서버에서 리로딩
replace(URL)	새로운 URL로 현재문서를 변경

console.log(location.origin);
console.log(location.pathname);
console.log(location.hostname);
console.log(location.host);
console.log(location.protocol);
console.log(location.port);

<!-- 현재 페이지 다시 불러오기 새로고침 --> 
<button onclick="javascript:location.reload();">reload</button><br>

<!-- href 프로퍼티 이용 링크 걸기 -->
<!-- script 부분 -->
<script type="text/javascript">
function test() {
	location.href="target.html";
}
</script>
<!-- body 부분 -->
<a href="javascript:test()">target.html로 이동 링크</a><br>
<button onclick="test()">target.html로 이동 버튼</button><br>
<button onclick="location.href='target.html'">target.html로 이동 버튼2</button><br>

<!-- form 태그 이용시 주의 -->
<!-- 데이터 전송할 페이지 변경하려면 action 속성을 변경해야 함 -->
<!-- script 부분 -->
<script type="text/javascript">
function changeAction() {
	document.getElementById("myForm").action = "target2.html"; //action 속성 변경
}
</script>
<!-- body 부분 -->
<form id="myForm" action="target.html">
	target.html로 전송될 데이터: <input type="text" name="userid"><br>
	<button>target.html로 전송</button><br>
	<button onclick="changeAction()">target2.html로 전송</button><br> 
	<button onclick="location.href='target2.html'">전송</button><br> <!-- 잘못된 코드, target.html로 전송됨 -->
</form>