8-1 웹 브라우저 객체 모델

JavaScript

8-1 웹 브라우저 객체 모델

리버윤 2023. 9. 16. 12:00

728x90

웹 브라우저 객체 모델(Browser Object Model, BOM)이란?

: 웹 '브라우저' 전체를 객체로 관리하는 것.

주요 구성 요소

1. Window : 모든 구성 요소를 포함하는 최상위 객체. 현재 열린 창이나 탭을 나타낸다.

접근 방법 - 객체 이름 뒤에 마침표(.)와 속성 이름을 붙이면 된다.

- open() 함수 : 현재 창이나 새 탭, 새로운 알림 창 등 다양한 형태로 새 창을 열 수 있다.

window.open("https://www.induk.ac.kr") //웹브라우저 창에서 새 탭이 열리면서 연결딘 문서나 사이트가 표시된다.

window.open("https://www.induk.ac.kr", "_self") //"_self"로 지정하면 현재 창에 새 창이 표시된다.

window.open("https://www.induk.ac.kr","", "left=0, top=0, width=400, height=400") //알림 창으로 표시할 때의 너비나 높이, 위치 등을 지정한다.

height	px 값	높이를 지정한다. 최솟값은 100
width	px 값	너비를 지정한다. 최솟값은 100
left	px 값	화면 왼쪽 가장자리를 기준으로 x 좌표의 위치를 지정한다.
top	px 값	화면 위쪽 가장자리를 기준으로 y 좌표의 위치를 지정한다.

- resizeBy(), resizeTo() 함수 : open()함수로 열린 알림창의 크기를 조절한다.

var firstWin = window.open(" ", " ", "width=200, height=300")
//resizeBy()는 기존 창의 너비 값과 높이 값에 입력한 값을 각각 더해 브라우저 창의 크기를 새로 지정한다.

 newFirstWin.risizeTo(200,300)
 //resizeTo()함수는 최종 크기를 지정한다.

- moveBy(), moveTo() 함수 : 열려 있는 알림창의 위치를 조절

newFirstWin.moveBy(300,300)
//현재 위치에서 가로로 300, 세로로 300 만큼 이동한다.

newFirstWin.moveTo(10,10)
//좌푯값 10,10으로 이동시킨다.

2. Navigator : 브라우저 자체에 대한 정보를 제공한다.

- 렌더링 엔진 : 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램

3. History : 브라우저 세션 내의 방문한 페이지 히스토리 목록을 관리한다.

- 속성과 함수

속성	설명
length	방문한 사이트 개수를 반환한다.

함수	설명
back()	이전 페이지를 현재 화면에 불러온다.
forward()	다음 페이지를 현재 화면에 불러온다.
go()	현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다.

4. Location : 현재 페이지의 URL 정보를 담고 있으며, 새로운 URL로 이동하거나 현재 페이지를 리로드하는 기능도 제공한다.

속성	설명
href	현재 페이지의 전체 URL을 가져오거나 설정한다.
protocol	현재 URL의 프로토콜(scheme) 부분을 가져오거나 설정한다 (예: 'http:', 'https:')
host	현재 URL의 호스트 이름과 포트 번호를 포함한 부분을 가져오거나 설정한다. (예: 'www.example.com', 'www.example.com:80').
hostname	현재 URL의 호스트 이름만을 가져오거나 설정한다 (예: 'www.example.com').
port	현재 URL의 포트 번호를 가져오거나 설정한다.
pathname	현재 URL에서 도메인 부분 뒤에 오는 경로(path) 부분을 가져오거나 설정한다 (예: '/path/to/myfile.html').
search	현재 URL에서 '?' 뒤에 오는 쿼리 문자열(query string) 부분을 가져오거나 설정다 (예: '?key1=value1&key2=value2').
hash	현재 URL에서 '#' 뒤에 오는 해시(fragment identifier) 부분을 가져오거나 설정다 (예: '#section1').

함수	설명
assign(url)	주어진 url로 이동한다.
reload()	페이지를 리로드한다.
replace(url)	history에 남기지 않고 주어진 url로 이동한다.

5. screen : 사용자의 화면에 대한 정보를 제공한다

속성	설명
availHeight	작업 표시줄이나 독 등과 같은 인터페이스 요소를 제외한 사용 가능한 화면 높이를 픽셀 단위로 반환한다.
availWidth	작업 표시줄이나 독 등과 같은 인터페이스 요소를 제외한 사용 가능한 화면 너비를 픽셀 단위로 반환한다.
height	전체 스크린 높이를 픽셀 단위로 반환한다.
width	전체 스크린 너비를 픽셀 단위로 반환한다.
colorDepth	현재 디스플레이에서 사용 가능한 색상 비트 수를 반환한다.
pixelDepth	현재 디스플레이에서 한 픽셀당 색상 비트 수를 반환한다.

6. Document : 웹 문서에서 <body>태그를 만나면 만들어지는 객체이다. html 문서 정보를 가지고 있다.

728x90