20220702 DOM, BOM

Doodung·2022년 7월 2일
0

WEB

목록 보기
11/15

자바스크립트 : html 문서를 조작하기 위해 만들어짐.
html 파일을 js로 어떻게 제어할 수 있는 것일까?
브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있음.
브라우저로 html 파일을 열게되면 -> 렌더링엔진이 한줄한줄 해석 후 객체화하여 js로 접근할 수 있게 해줌.

DOM -> 문서 객체 모델

도큐먼트 오브젝트 모델
-> TREE 구조

각각의 노드에 접근해서 제어할 수 있음.
1. 접근한다
2. 제어한다

노드에 어떻게 접근할 수 있을까?

BOM -> 브라우저 객체 모델

웹브라우저를 객체화
BOM(브라우저 객체 모델) -> 브라우저 자체를 제어 -> 이를 제어할 수 있게 해주는 것이 DOCUMENT 객체
-> 최상위 노드이다.
(CSSOM -> CSS를 JS로 제어)

why 객체화 ?
마우스로 브라우저 기능 이용하는 것 -> 브라우저를 객체화 함으로써 JS로 제어할 수 있게하는 것.

브라우저 객체

window : 모든 객체가 소속된 객체이며, 브라우저 창을 의미한다. (생략가능하다.)
document : 현재 문서에 대한 정보를 갖고 있는 객체 (DOM에 대한 정보를 갖고있음)
dom 객체를 가져올 수 있음.
history : 현재의 브라우저가 접근했던 URL history를 제어할 수 있음 (<- ->)
뒤로가기 제어(history.back()), 앞으로 가기 (history.forward())
loation : 문서의 주소와 관련된 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티. 이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있음
windwow.location, documen.location, location 전부 가능
location.host -> 홈페이지 호스트 가져옴
location.href -> 웹문서 주소 변경 가능
screen : 사용자의 디스플레이 화면에 대한 다양한 정보를 갖고있는 객체

navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있음. 크로스 브라우징 이슈를 해결할 때 사용할 수 있음 (EX : Chrome -> addEventListener, IE->attachEvent)

profile
반가워요!

0개의 댓글