BOM
- Brower Object Model
- 웹 브라우저의 다양한 기능을 객체처럼 다루는 모델
window 객체
-
Global Context(전역공간)이자 브라우저 창을 나타내는 객체
-
전역 변수나 전역 함수의 경우 window의 프로퍼티처럼 작동
![](https://velog.velcdn.com/images/dev_eunchae/post/020e5c2d-fb53-441f-a075-71426ab6d318/image.png)
-
window에 프로퍼티로 등록되어, window에 접근해서 값을 불러올 수 있다.
-
중요 프로퍼티
: innerWidth, innerHeight, screenX, screenY, scrollBy(), scrollTo() 등
![](https://velog.velcdn.com/images/dev_eunchae/post/3135f2ab-6919-49a3-ace5-d237a9da5f5e/image.png)
ex. 사용자가 볼 수 있는 웹페이지의 넓이/높이
![](https://velog.velcdn.com/images/dev_eunchae/post/b5fdcfb3-75f3-4f62-86cc-c0b5b38a478d/image.png)
ex. 웹브라우저가 스크린에서 몇 px에 위치해있는지 x,y축
![](https://velog.velcdn.com/images/dev_eunchae/post/5790fdc9-98b8-489b-8e2c-1fe4581fc632/image.png)
ex. scroll의 위치를 바꾸는 것 -> by 는 현재 위치에서, to는 절대 위치에서
Screen 객체
- 사용자 환경의 디스플레이(모니터)정보를 가지는 객체
- 중요 프로퍼티
: availHeight, availWidth, height, orientation
![](https://velog.velcdn.com/images/dev_eunchae/post/9ca488fc-af29-4fa2-92d7-a7d3ad19ff9a/image.png)
ex. height: 모니터의 높이(해상도를 건드리거나 모니터를 바꾸지 않는 한 변하지 않음) / availHeight : 그 중에서 브라우저가 사용 가능한 높이
![](https://velog.velcdn.com/images/dev_eunchae/post/8fb274e0-7324-4aba-a4a3-b575d08975b6/image.png)
ex. 화면의 앵글을 알려주거나, 타입 등을 알려주는 객체
![](https://velog.velcdn.com/images/dev_eunchae/post/f5df978e-9224-4b23-89a7-da06674fbf82/image.png)
![](https://velog.velcdn.com/images/dev_eunchae/post/d7d7f886-cc73-43f8-a315-d3bf4b6c8761/image.png)
location 객체
- 사용자가 보고 있는 페이지의 URL을 다루는 객체
- 중요 프로퍼티
: href : 페이지와 페이지를 이동한다, reload : 새로고침 , replace : 인수로 전달한 페이지로 교체
![](https://velog.velcdn.com/images/dev_eunchae/post/5e5a1f12-3968-4a40-af0e-9de7dfbfd095/image.png)
navigator 객체
DOM
- Document Object Model
- 자바스크립트 Node 객체의 계층화된 트리
![](https://velog.velcdn.com/images/dev_eunchae/post/8170d3d8-e05f-4f78-b6d7-28d818e0f843/image.png)
- 빨간 박스 : node
- node 들을 통해서 트리화한 모델이 dom이다
document 노드
- 웹 페이지마다 존재하는 객체
- 웹 페이지 안의 모든 컨텐츠를 다루는 시작점
- 중요 프로퍼티
: title, url, doctype, documentElement, head, body, getElementById, createElement, querySelector, readyState
![](https://velog.velcdn.com/images/dev_eunchae/post/334120b1-19a1-4db9-b3e9-7810e62ae14e/image.png)
- 페이지에 접속 =>
- Loading (HTML 태그를 읽고 DOM 트리를 구축한다) =>
- Interactive (완료 후, 이미지-CSS-JS 하위 자원 로딩 ) =>
- Complete (문서, 하위자원 로딩 완료. window load 이벤트가 트리거 될 수 있음)
![](https://velog.velcdn.com/images/dev_eunchae/post/98bedbdd-9641-4c33-808d-3366f051143f/image.png)
- window에 이벤트를 달 수 있다. 이때, load 단계일 때 함수를 실행한다고 했을 때 => load가 되려면 Complete 상태여야함!
element 노드
- 웹 페이지 안의 각 html 태그 요소들을 의미
- 중요 프로퍼티
: querySelector, classList, dataset, id, innerHTML, parentNode, nextSibling, previousSibling
![](https://velog.velcdn.com/images/dev_eunchae/post/bf0d61fb-5ea9-40c5-91a6-f00a139b672c/image.png)
- classList.add("") : 클래스 추가
- classList.contains : 클래스가 있는지 없는지 확인
- dataset : 데이터 꺼내기
![](https://velog.velcdn.com/images/dev_eunchae/post/1f75f56c-66cb-4f29-a976-07207be1fc9d/image.png)
=> 없을 때는???
![](https://velog.velcdn.com/images/dev_eunchae/post/7347386a-4c08-4798-ae5f-d44bd70762cb/image.png)
- 텍스트 노드? 혹은 주석 노드가 반환된다
- 왜? 줄바꿈이 있어서 반환되었다.
![](https://velog.velcdn.com/images/dev_eunchae/post/a6025a9b-8c50-48a7-8edc-2eabcf0a05d1/image.png)
- 그래서 nextElementSibling / previousElementSibling => element를 붙여주어야 html이 반환되기 때문에 주의해야함.
![](https://velog.velcdn.com/images/dev_eunchae/post/d2388516-e512-4804-b3d2-755bd7889405/image.png)
![](https://velog.velcdn.com/images/dev_eunchae/post/11669540-442c-46df-9e4c-25fc865f7bc2/image.png)