[22.06.16]

김도훈·2022년 6월 16일

브라우저 객체모델 BOM

자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것

객체	설명
window	브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 상위 객체
Document	웹 문서에서 <body> 태그를 만나면 만들어지는 객체. Html 문서 정보를 가짐
History	현재 창에서 사용자 방문 기록을 저장하고 있는 객체
Location	현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigater	현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen	현재 사용 중인 화면 정보를 다루는 객체

속성	설명
document	브라우저 창에 표시된 웹 문서에 접근할 수 있음
freeElement	현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환. 포함되어 있지 않으면 null 반환
innerHeight	내용 영역의 높이를 나타냄
innerWidth	내용 영역의 너비를 나타냄
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지 반환
location	Window 객체 위치/현재 URL을 나타냄
name	브라우저 창에 표시된 웹 문서에 접근할 수 있음
outerHeight	현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환. 포함되어 있지 않으면 null 반환
outerWidth	내용 영역의 높이를 나타냄
PageXOffset	스크롤했을 때 화면이 수평으로 이동하는 픽셀 수 scrollX와 같음
PageYOffset	브라우저 창 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리를 나타냄
parent	현재 창이나 서브 프레임의 부모 프레임
screenX	브라우저 창 왼쪽 테두리가 모니터 왼쪽 테두리로부터 떨어져있는 거리
screenY	브라우저 창 위쪽 테두리가 모니터 위쪽 테두리로부터 떨어져있는 거리
scrollX	스크롤했을 때 수평으로 이동하는 픽셀 수
scrollY	스크롤했을 때 수직으로 이동하는 픽셀 수
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지 반환

웹 브라우저 버전, 렌더링 엔진, 사용자 에이전트 문자열 등을 비롯해 웹 브라우저 정보가 담긴 객체

렌더링 엔진 : 브라우저에서 웹 문서의 태그와 스타일을 해석하는 프로그램
자바스크립트 엔진 : 브라우저에서 자바스크립트를 해석하는 프로그램
웹 브라우저마다 내장된 렌더링 엔진과 자바스크립트 엔진이 다름. 웹 브라우저를 구별하는데 사용
진

클라이언트에서 서버로 정보를 보낼 때 클라이언트에서 함께 보내는 정보
서버에서는 이 정보를 보고 브라우저 종류를 확인한 후 그 브라우저에 맞게 웹 페이지 표시
navigator.useragent에 포함되어 있음

브라우저에서 ‘뒤로’, ‘앞으로’ 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소 저장
읽기 전용

현재 문서의 URL 주소 정보
이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있음

화면 정보 (TV 모니터나 모바일기기 화면)

휴