브라우저 객체 모델(BOM)

: 브라우저의 기능이나 정보를 사용하기 위한 인터페이스로 자바스크립트가 접근하여 브라우저의 기능을 실행하거나

정보를 얻을 수 있도록 합니다.

 

구분	속성 / 메소드	설명
window	open( )	새로운 window를 엽니다
	close( )	현재 window를 닫습니다
location	location.href	현재 웹 페이지의 URL 정보를 제공
	location.assign( )	새로운 웹 페이지(문서)를 보여줌
history	back( )	브라우저에서 뒤로 가기 버튼을 누른 효과를 제공
	forward( )	브라우저에서 앞으로 가기 버튼을 누른 효과를 제공
navigator	appName	브라우저의 이름을 제공
	online	현재 온라인 상태인지를 확인

 

▶ window 객체

웹브라우저에 대한 전반적인 정보 취득이나 제어 등에 관련된 객체

하위 객체에는 location, history, sereen, document 등이 있다

- open( ) 메서드

새로운 윈도우를 만들어 주는 메서드

window.open( '문서 주소', '윈도우 이름', '옵션 = 값, 옵션 = 값, 옵션 = 값, ...');

 

▶ setInterval( ), clearInterval( ), setTimeout( ), clearTimeout( ) 메서드 타이머 함수라고 함

** setInterval( )은 일정 시간마다 지정한 함수를 반복적으로 실행하게 해주는 메서드

setInterval( function( ) {    실행문 }, 밀리초(1/1000초));

 

** clearInterval( )은 setInterval( )을 중지시키는 메서드

clearInterval( )을 사용하려면 setInterval( )이 변수에 저장되어 있어야 함

** clearTimeout( )은 setTimeOut( )을 중지시키는 메서드

clearTimeout( )을 사용하려면 setTimeOut( )이 변수에 저장되어 있어야 함

let increase = setTimeout(function( ) {     alert('증가 실행'); }, 2000); clearTimeout(increase);  //setTimeout( )이 실행되지 않음

 

※ location 객체

loation 객체는 웹브라우저의 주소 URL 관련 객체

 

▶ 프로퍼티

http://icoxpublish.com:8080/search?book=5#icox

프로퍼티	설명
hash	주소의 앵커명(#)을 반환 #icox
host	주소의 호스트명과 포트 번호를 반환 http://icoxpublish.com:8080
port	주소의 포트 번호를 반환 8080
pathname	주소의 패스명을 반환 /search
href	주소의 값을 반환 http://icoxpublish.com:8080/search?book=5#icox
protocol	주소의 프로토콜명을 반환 http:
seaarch	주소의 쿼리 문자열을 반환 ?book=5

 

▶ 메서드

메서드	설명
reload( )	현재 페이지를 다시 로드함
replace( )	replace(url)일 때 url 값으로 이동

 

※ screen객체

screen객체는 모니터 화면정보 관련 객체

▶ 프로퍼티

프로퍼티	설명
width	화면의 너비를 반환
height	화면의 높이를 반환
avaiWidth	화면에서 작업표시줄을 제외한 너비를 반환
avaiHeight	화면에서 작업표시줄을 제외한 높이를 반환
colorDepth	화면에서 사용 가능한 색상수를 반환
pixelDepth	화면의 색상 해상도를 반환

 

※ history 객체

history 객체는 페이지가 이동한 정보를 관리하는 객체

▶ 메서드

메서드	설명
back ( )	이전 페이지로 이동
forward ( )	이후 페이지로 이동
go ( )	go(n)일 때 n값에 따라 양수이면 이후 페이지로 음수이면 이전 페이지로 이동

 

※ navigator 객체

navigator 객체는 브라우저 버전이나 브라우저명 등 브라우저 정보에 관한 객체

▶ 프로퍼티

프로퍼티	설명
appCodeName	브라우저의 코드명을 반환
appName	브라우저명을 반환
appVersion	브라우저의 버전을 반환
platForm	플랫폼명을 반환
userAgent	브라우저의 코드명과 버전을 반환

 

**  변수에 저장된 요소들을 배열선택 방법과 item( )메서드를 이용하여 개별 선택할 수 있음

let list2 = document.querySelectorAll('#box2 > ul > li'); list2[0].style.background = "#ccc"; list2.item( 1 ).style.background = "#ddd";