반응형
브라우저 객체 모델
자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것
주요 브라우저 내장객체
- Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체
- Document : 웹 문서에서 <body> 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음
- History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체
- Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체
- Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체
- Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체
Window 객체
브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체
자바스크립트의 모든 객체는 window객체에 포함
Window 객체 속성
- document : 브라우저 창에 표시된 웹 문서에 접근 가능
- frameElement : 현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환/ 포함되어 있지 않으면 null을 반환
- inner Height : 내용 영역의 높이
- innerWidth : 내용 영역의 너비
- localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
- location : Window 객체의 위치/현재 URL
- name : 브라우저 창의 이름을 가져오거나 수정
- outerHeight : 브라우저 창의 바깥 높이
- outerWidth : 브라우저 창의 바깥 너비
- pageXOffset : 스크롤했을 때 화면이 수평으로 이동하는 픽셀 수 (=ScrollX)
- pageYOffset : 스크롤했을 때 화면이 수직으로 이동하는 픽셀 수. (=ScrollY)
- parent : 현재 창이나 서브 프레임의 부모 프레임
- screenx : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리
- screeny : 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리
- scrollX : 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냅니다.
- scrollY : 스크롤했을 때 수직으로 이동하는 픽셀 수
- sessionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환
window 객체 함수
- alert() : 알림창 표시
- blur() : 창에서 포커스 제거
- close() : 현재 열려 있는 창을 닫음
- confirm () : [확인], [취소]가 있는 확인 창을 표시
- focus() : 현재 창에 포커스를 부여
- moveBy(x, y) : 현재 위치를 기준으로 지정한 크기만큼 이동
- moveTo(x, y) : 현재 화면을 기준으로 창을 지정한 좌표로 이동
- open([주소, 창 표시방법, 너비 높이 위치]]) : 새로운 창을 염
- postMessage() : 다른 창으로 메시지를 전달
- print() : 현재 문서를 인쇄
- prompt() : 프롬프트 창에 입력한 텍스트를 반환
- resizeBy() : 현재 브라우저 창을 기준으로 지정한 크기만큼 현재 창 크기를 조절
- resizeTo() : 동적으로 브라우저 창의 크기를 조절, 음수값 사용 불가
- scroll() : 문서에서 특정 위치로 스크롤
- scrollBy() : 지정한 크기만큼씩 스크롤
- scrollTo() : 지정한 위치까지 스크롤
- setCursor() : 현재 창의 커서를 변경
- showModalDialog() : 모달 창을 표시
- sizeToContent() : 내용에 맞게 창 크기를 맞춤
- stop() : 로딩을 중지
Navigator 객체
- 웹 브라우저 관련 정보를 담고 있어 렌더링 엔진(브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램)의 이름으로 종류 구분
- 브라우저 마다 렌더링 엔진이나 자바스크립트 엔진이 다름
Navigator 속성
console에 navigator를 입력하여 navigator 객체 속성 확인 가능
- appCodeName : 브라우저 이름(코드 이름)을 문자열로 반환
- appName : 브라우저 공식 이름을 문자열로 반환
- appVersion : 브라우저 버전을 문자열로 반환합니다.
- battery : 배터리 충전 상태를 알려 주는 정보가 담긴 객체를 반환
- connection : 브라우저 장치의 네트워크 정보가 담긴 객체를 반환
- cookieEnabled : 쿠키 정보를 무시한다면 false, 그렇지 않다면 true를 반환
- geolocation : 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환
- maxTouchPoints : 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환
- platform : 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환
- userAgent : 현재 브라우저 정보가 있는 사용자 에이전트(User Agent) 문자열을 반환, 클라이언트에서 서버로 정보를 보낼 때 클라이언트에서 함께 보내는 정보로, 서버에서 해당 정보를 활용하여 브라우저에 맞는 웹 페이지 표시/ 권장 브라우저 안내에 유용
History 객체
브라우저 방문 URL 목록을 담고 있으며, 읽기 전용
History 객체 속성
- length :현재 브라우저 창의 방문한 주소의 개수
History 객체 함수
- back() : 현재 목록의 이전 페이지로 이동
- forward() : 현재 목록의 다음 페이지 이동
- go(index) : 현재 페이지를 기준으로 index 만큼 이전/다음 페이지로 이동 (음수 가능)
Location 객체
현재 문서의 URL 정보를 담고 있음
Location 객체 속성
- hash : URL 중 #로 시작하는 해시 부분을 나타냄
- host : URL의 호스트 이름과 포트 번호를 나타냄
- hostname : URL의 호스트 이름을 나타냄
- href : 전체 URL을 나타냄. 값을 변경하면 해당 주소로 이동
- pathname : URL 경로를 나타냄
- port : URL의 포트 번호를 나타냄
- protocol : http://나 ftp:// 같은 URL의 프로토콜을 나타냄
- password : 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 URL일 경우 password 정보를 저장
- search : URL 중 물음표로 시작하는 검색 내용 부분을 나타냅니다.
- username : 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트 URL일 경우 username정보를 저장
Location 객체의 함수
- assign() : 현재 문서에 새 문서 주소를 할당해 새 문서를 가져옴
- reload(): 브라우저의 [새로 고침]과 같은 역할
- replace() : 현재 문서의 URL을 지우고 다른 URL의 문서로 교체
- toString(): 현재 문서의 URL을 문자열로 반환
Screen 객체
- 화면에 대한 정보를 담고 있음
- 화면 자체의 사이즈 속성 값을 담고 있어 브라우저 창 크기에 따라 속성값이 바뀌지 않음
Screen 객체의 속성
- availHeight : 화면에서 윈도우의 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분 의 높이를 나타냅니다.
- availWidth : UI 영역을 제외한 부분의 너비를 나타냄
- colorDepth : 화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냄
- width : UI 영역을 포함한 화면의 너비를 나타냄
- height : UI 영역을 포함한 화면의 높이를 나타냄
- orientation : 화면의 현재 방향을 나타냄(Default : 가로 방향).
- pixelDepth 화면상에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냄
Screen 객체의 함수
- lockOrientation() : 화면 방향을 잠금
- unlockOrientation() : 화면 방향 잠금을 해제
반응형
'JS > Javascript' 카테고리의 다른 글
| [Javascript] 디스트럭처링 (Destructuring) (1) | 2024.07.05 |
|---|---|
| [Javascript] this (0) | 2024.06.07 |
| [Javascript] addEventListener() (0) | 2024.05.29 |
| [Javascript] 배열과 객체 복사 (0) | 2024.01.31 |
| [Javascript] 데이터와 데이터 타입 (0) | 2024.01.24 |