Web APIs
종류
- DOM APIs
- Network APIs
- Graphics APIs
- Audio/Video APIs
- Device APIs
- File APIs
- Storage APIs
등등등
브라우저 구조분석
문서 객체 모델(Document Object Model, DOM)
: 웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다.document
객체는 페이지의 기존 진입점 역할을 한다.브라우저 객체 모델(Browser Object Model, BOM)
: 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)이 제공하는 추가 객체를 나타낸다.navigator
: 브라우저와 운영체제에 대한 정보를 제공한다.location
: 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경할 수 있다.
Document
브라우저의 좌표
getBoundingClientRect
element.getBoundigClientRect()
메서드는elem
을 감싸는 가장 작은 네모의 창 기준 좌표를 DOMRect 클래스의 객체 형태로 반환한다.x와 y
: 요소를 감싸는 네모창 기준 x,ywidth와 height
: 요소를 감싸는 네모의 너비, 높이- 창 기준 :
clientX
clientY
- 문서 기준 :
pageX
pageY
top
bottom
: 요소를 감싸는 네모의위쪽 모서리, 아래쪽 모서리의 Y좌표left
right
: 요소를 감싸는 네모의 왼쪽 모서리, 오른쪽 모서리의 X좌표- left = x
- top = y
- right = x + width
- bottom = y + height
client, offset, page, screen의 차이
client
: 스크롤을 무시하고 브라우저 페이지에서의 좌표offset
: 스크롤을 포함한 전체 문서를 기준으로 이벤트 대상 객체의 상대적 마우스 좌표page
: 스크롤 화면을 포함해 전체 문서 기준screen
: 모니터 화면에서의 좌표
reference
- 모던 자바스크립트 튜토리얼(브라우저 환경과 다양한 명세서)
- 모던 자바스크립트 튜토리얼(좌표)
- clinetX, OffsetX, pageX, screenX의 차이
'Javascript' 카테고리의 다른 글
실행 컨텍스트 (0) | 2021.11.28 |
---|---|
자바스크립트 런타임환경 (0) | 2021.09.11 |
이벤트 (0) | 2021.08.28 |
CRP(Critical render path, 브라우저 렌더링 순서) (0) | 2021.08.21 |
DOM (0) | 2021.08.10 |