브라우저 객체 모델 : 브라우저 전체를 객체로 관리하는 것
브라우저 창이 열리면 Window객체가 만들어지고,
그 아래 브라우저 각 요소에 해당하는 객체가 생성됨
[자주 사용하는 브라우저 내장 객체]
Window : 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최 상위 객체
Document : 웹 문서에서 <body> 태그를 만나면 만들어지는 객체. HTML 문서 정보를 가지고 있다.
History : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
Location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator : 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen : 현재 사용 중인 화면 정보를 다루는 객체
Window 객체의 여러 속성의 접근하면
브라우저 창의 정보를 가져오거나, 값을 바꿀 수도 있음
속성에 접근하려면객체 이름 뒤에 .(마침표)를 붙이면 됨.
[Window 객체의 속성]
document : 브라우저 창에 표시된 웹 문서에 접근
localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
seesionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환
location : Window 객체의 위치/현재 URL을 나타냄
name : 브라우저 창의 이름을 가져오거나 수정
등등등 더 많음
[Window 객체의 함수]
alert(), prompt() 함수등도 사실 Window객체라서
window.alert() 라고 입력해야 사용할 수 있지만. Window객체는
기본 객체이기 때문에 window. 을 생략해도 됨
alert() : 알림창 표시
blur(): 창에서 포커스 제거
close() : 현재 열려 있는 창 닫기
focus() : 현재 창에 포커스를 부여
open() : 새로운 창 열기
prompt() : 프롬프트 창에 입력한 텍스트를 반환
showModalDialog() : 모달창 표시
등등등 더 많음
[Navigator 객체]
Navigator 객체는 웹 브라우저와 관련된 정보가 담겨있다.
렌더링 엔진 : 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램
Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류를 구별
자바스크립트 소스를 해석하는 자바스크립트 엔진 또한 브라우저마다 다르다.
[Navigator 객체의 여러 가지 속성]
새로운 속성이 계속 추가되고 있다.
appCodeName : 브라우저 이름을 문자열로 반환
appName : 브라우저 공식 이름을 문자열로 반환
appVersion : 브라우저 버전을 문자열로 반환
battery : 배터리 충전 상태를 알려주는 정보가 담긴 객체 반환
connection : 브라우저 장치의 네트워크 정보가 담긴 객체를 반환
cookieEnabled : 쿠키 정보를 무시한다면 false, 그렇지 않으면 true 반환
userAgent : 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환
등등등 더 많다
[History 객체]
‘뒤로’, ‘앞으로’ 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소가 저장되어 있음.
보안 이슈로 브라우저에 있는 브라우저 히스토리는 읽기 전용이다.
[History 객체의 속성]
history.length : 현재 브라우저 창의 History 목록에 있는 항목의 개수, 즉 방문한 사이트 개수를 반환
[History 객체의 함수]
history.back() : History 목록에서 이전 페이지를 현재 화면에 불러옴
forward() : Histroy 목록에서 다음 페이지를 현재 화면에 불러옴
go() : 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러옴 history.go(1)은 다음페이지, history(-1)은 이전 페이지 불러옴
[Location 객체]
location 객체는 브라우저의 주소 표시줄과 관련되어 있음
현재 문서의 URL 주소 정보를 가지고 있는데, 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있음
[Location 객체의 속성]
hash : URL 중 #으로 시작하는 해시 부분을 나타냄
host : URL의 호스트 이름과 포트 번호를 나타냄
hostname : URL의 호스트 이름을 나타냄
href : 전체 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 객체]
PC모니터나 모바일 기기의 화면 정보를 알아낼 때 사용하는 객체
[Screen 객체의 속성]
availHeight : 윈도우의 작업표시줄, 맥의 메뉴/독 등의 UI 영역을 제외한 부분의 높이
availWidth : UI 영역을 제외한 부분의 너비를 나타냄
colorDepth : 화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냄
height : UI 영역을 포함한 화면의 높이를 나타냄
orientation : 화면의 현재 방향을 나타냄. 디폴트는 가로
pixelDepth : 화면상에서 픽셀을 렌더링할 떄 사용하는 비트 수를 나타냄
width : UI 영역을 포함한 화면의 너비를 나타냄
[Screen 객체의 함수]
lockOrientation() : 화면 방향을 잠금
unlockOrientation() : 화면 방향 잠금 해제
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [JS] id를 반환받지 않아도 Script에서 바로 지목할 수 있다. (0) | 2024.04.24 |
|---|---|
| [JS] 이벤트 버블링, 이벤트 캡처링 (0) | 2024.04.24 |
| DOM으로 Form 요소 접근 (0) | 2023.09.29 |
| DOM 기초 정리 (0) | 2023.09.28 |
| JSON.stringify(), JSON.parse(), toJSON() 정리 (0) | 2023.09.26 |
