주요 BOM 객체
Window
브라우저 창이 열릴 때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소의 최상위 객체
Document
웹 문서에서 <body> 태그를 만나면 만들어지는 객체
HTML 문서 정보를 가지고 있다
Frames
현재 브라우저 창의 모든 하위 프레임을 배열과 같은 객체로 나열
History
현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
Location
현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator
현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen
현재 사용 중인 화면 정보를 다루는 객체
Window
자바스크립트의 Window 객체는 웹 브라우저 상태를 제어하는 객체로, 자바스크립트 객체 중 최상위이자 기본이 되는 객체입니다
Window 객체에는 웹 브라우저 창과 관련된 여러 가지 속성이 존재합니다. 이 속성에 접근해 브라우저 창의 정보를 가져올 수 있고, 필요하면 값을 바꿀 수도 있습니다. 속성에 접근하는 방법은 다른 객체와 마찬가지로 객체 이름 뒤에 마침표(.)와 속성 이름을 붙이면 됩니다
| 메소드(속성) | 설명 |
| document | 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다 |
| frameElement | 현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환합니다. 포함되어 있지 않으면 null을 반환합니다 |
| innerHeight | 내용 영역의 높이를 나타냅니다 |
| innerWidth | 내용 영역의 너비를 나타냅니다 |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환합니다 |
| location | Window 객체의 위치 / 현재 URL을 나타냅니다 |
| name | 브라우저 창의 이름을 가져오거나 수정합니다 |
| outerHeight | 브라우저 창의 바깥 높이를 나타냅니다 |
| outerWidth | 브라우저 창의 바깥 너비를 나타냅니다 |
| parent | 현재 창이나 서브 프레임의 부모 프레임입니다 |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다 |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냅니다 |
| scrollX | 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냅니다 |
| scrollY | 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냅니다 |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다 |
alert() 함수나 prompt() 함수를 사용할 때 window.alert()라고 입력해야 사용할 수 있지만, Window 객체는 기본 객체이기 때문에 window.를 생략하고 alert()만 입력해도 사용할 수 있습니다
| 함수 | 설명 |
| alert() | 알림 창(Alert Dialog)을 표시합니다 |
| blur() | 창에서 포커스를 제거합니다 |
| close() | 현재 열려 있는 창을 닫습니다 |
| confirm() | [확인], [취소]가 있는 확인 창을 표시합니다 |
| focus() | 현재 창에 포커스를 부여합니다 |
| moveBy() | 현재 창을 지정한 크키만큼 이동합니다 |
| moveTo() | 현재 창을 지정한 좌표로 이동합니다 |
| open() | 새로운 창을 엽니다 |
| postMessage() | 다른 창으로 메시지를 전달합니다 |
| print() | 현재 문서를 인쇄합니다 |
| prompt() | 프롬프트 창에 입력한 텍스트를 반환합니다 |
| resizeBy() | 지정한 크기만큼 현재 창 크기를 조절합니다 |
| resizeTo() | 동적으로 브라우저 창의 크기를 조절합니다 |
| scroll() | 문서에서 특정 위치로 스크롤합니다 |
| scrollBy() | 지정한 크기만큼씩 스크롤합니다 |
| scrollTo() | 지정한 위치까지 스크롤합니다 |
| setCursor() | 현재 창의 커서를 변경합니다 |
| showModalDialog() | 모달 창을 표시합니다 |
| sizeToContent() | 내용에 맞체 창 크기를 맞춥니다 |
| stop() | 로딩을 중지합니다 |
BOM
웹 브라우저 전체를 객체로 관리하는 것을 브라우저 객체 모델(Browser Object Model)이라고 합니다. 브라우저 객체 모델은 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것을 가리킵니다.
브라우저 창이 열리면 가장 먼저 Window 객체가 만들어지고, 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어집니다. 이들 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이며 각각 또 다른 하위 객체를 가지고 있습니다
Navigator 객체
Navigator 객체에는 웹 브라우저와 관련된 정보가 담겨 있습니다. 웹 브라우저 버전을 비롯해 웹 브라우저에 어떤 플러그인이 설치되어 있는지, 웹 브라우저가 온라인 상태인지 오프라인 상태인지 등 다양한 정보가 있습니다. 그래서 Navigator 객체를 사용하면 현재 웹 문서에 접속한 사용자가 크롬 브라우저를 사용했는지, 익스플로러를 사용했는지, 혹은 모바일로 접속했는지 등의 정보를 알 수 있습니다
렌더링 엔진이란 ❓
Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류를 구별합니다. 렌더링 엔진이란 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램입니다. 웹 브라우저마다 내장된 렌더링 엔진이 다르기 때문에 HTML이나 CSS를 해석하는 방법이 다릅니다. 그래서 표준화되지 않은 CSS3 속성 앞에 -webkit- 또는 -oz- 같은 접두어(Prefix)를 붙여서 사용자가 접속한 브라우저에 맞게 렌더링합니다
사용할 수 있는 브라우저가 많아지고 웹 애플리케이션이 등장하면서 Navigator 객체에는 진동 감지 속성이나 배터리 상태를 체크하는 속성 등 새로운 속성이 계속 추가되고 있습니다. 이 정보는 사용자가 수정할 수 없고 볼 수만 있습니다
| 메소드(속성) | 설명 |
| appCodeName | 브라우저 이름(코드 이름)을 문자열로 반환합니다 |
| appName | 브라우저 공식 이름을 문자열로 반환합니다 |
| appVersion | 브라우저 버전을 문자열로 반환합니다 |
| battery | 배터리 충전 상태를 알려 주는 정보가 담긴 객체를 반환합니다 |
| connection | 브라우저 장치의 네트워크 정보가 담긴 객체를 반환합니다 |
| cookieEnabled | 쿠기 정보를 무시한다면 false, 그렇지 않다면 true를 반환합니다 |
| geolocation | 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환합니다 |
| maxTouchPoints | 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환합니다 |
| platform | 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환합니다 |
| userAgent | 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환합니다 |
Histoty 객체
History 객체에는 브라우저에서 '뒤로', '앞으로' 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소가 저장되어 있습니다. 보안 문제 때문에 브라우저에 있는 브라우저 히스토리는 읽기 전용입니다
| 메소드 (속성) | 설명 |
| length | 현재 브라우저 창의 History 목록에 있는 항목의 개수, 즉 방문한 사이트 개수를 반환합니다 |
| 함수 | 설명 |
| back() | History 목록에서 이전 페이지를 현재 화면에 불러옵니다 |
| forward() | History 목록에서 다음 페이지를 현재 화면에 불러옵니다 |
| go() | History 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러옵니다. 예를 들어 histoty.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옵니다 |
Location 객체
Location 객체는 브라우저의 주소 표시줄과 관련되어 있습니다. 즉, 현재 문서의 URL 주소 정보를 가지고 있는데, 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있습니다
| 메소드 (속성) | 설명 |
| hash | URL 중 #로 시작하는 해시 부분을 나타냅니다 |
| host | URL의 호스트 이름과 포트 번호를 나타냅니다 |
| hostname | URL의 호스트 이름을 나타냅니다 |
| href | 전체 URL입니다. 이 값을 변경하면 해당 주소로 이동할 수 있습니다 |
| pathname | URL 경로를 나타냅니다 |
| protocol | http://나 ftp:// 같은 URL의 프로토콜을 나타냅니다 |
| password | 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 URL일 경우 password 정보를 저장합니다 |
| search | URL 중 ?(물음표)로 시작하는 검색 내용 부분을 나타냅니다 |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트 URL일 경우 username 정보를 저장합니다 |
| 함수 | 설명 |
| assign() | 현재 문서에 새 문서 주소를 할당해 새 문서를 가져옵니다 |
| reload() | 현재 문서를 다시 불러옵니다. 브라우저의 [새로 고침]과 같은 역할을 합니다 |
| replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체합니다 |
| toString() | 현재 문서의 URL을 문자열로 반환합니다 |
Screen 객체
웹 사이트에 접속하는 사용자의 화면 크기는 모두 다른데, 화면 크기나 정보를 알고 싶다면 Screen 객체를 사용하면 됩니다. Screen 객체는 주로 화면 정보를 알아낼 때 많이 사용하는 객체입니다. 여기에서 '화면'은 PC 모니터나 모바일 기기의 화면 자체를 말합니다
| 메소드 (속성) | 설명 |
| availHeight | 화면에서 윈도우의 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분의 높이를 나타냅니다 |
| availWidth | UI 영역을 제외한 부분의 너비를 나타냅니다 |
| colorDepth | 화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냅니다 |
| height | UI 영역을 포함한 화면의 높이를 나타냅니다 |
| orientation | 화면의 현재 방향을 나타냅니다. 기본은 가로 방향입니다 |
| pixelDepth | 화면상에서 픽셀을 랜더링할 때 사용하는 비트 수를 나타냅니다 |
| width | UI 영역을 포함한 화면의 너비를 나타냅니다 |
| 함수 | 설명 |
| lockOrientation() | 화면 방향을 잠급니다 |
| unlockOrientation() | 화면 방향 잠금을 해제합니다 |
DOM
BOM의 오브젝트 중 하나로 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
Document Object Model의 약자이며, 열려있는 웹 페이지에 대한 정보를 따로 객체화하여 관리한다. 이때, Window 객체의 document 프로퍼티를 사용한다
DOM tree
웹 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때, 모델은 객체의 트리로 구성되는데 이것을 DOM tree라고 한다. DOM tree는 총 네 종류의 노드로 구성된다
문서 노드 (Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다
요소 노드 (Element Node)
요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 노드는 요소별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다
어트리뷰트 노드 (Attribute Node)
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다
텍스트 노드 (Text Node)
텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다
'Language > JavaScript' 카테고리의 다른 글
| [JS] Map 객체 (0) | 2021.08.18 |
|---|---|
| [JS] 타입 변환 (0) | 2021.08.11 |
| [JS] 호이스팅이란? (0) | 2021.07.07 |
| [JS] Promise란? (0) | 2021.07.02 |
| [JS] undefined, null (0) | 2021.06.24 |
댓글