Dom이란?

javascript는 웹문서 제어를 위해 태어남. html조작을 위해 태어남.

브라우저 안에 웹 문서를 해석할 수있는 렌더링 엔진이 html문서를 해석해서 javascript가 접근할 수 있는 객체로 만든다.

tree구조를 지님. 부모태그와 n개 자식 태그를 가질 수 있음.

브라우저 제어 모델링을 bom. document객체는 dom tree최상위이고 이는 객체 접근하는 진입점임.

즉 다큐먼트 객체→도큐먼트 객체 접근→프로퍼티로 제어.

DOM은 브라우저에서 js로 html요소를 제어할 수 있도록 제공하는 api. api는 브라우저에서 제공하는 기능임.

BOM

브라우저 객체모델. 웹 브라우저를 객체화 한것. 이것도 js로 제어하기 위해 만듦. 브라우저 자체 뭐 탭이나 등등을 만지기 위해 객체화한것.

browser 객체

  1. window- 브라우저 창. 모든 객체가 소속되어있음. (생략가능)
    1. window.open('https://google.com) 이거 하면 새 탭이 열림.
    2. window.close(), window.alert()
  2. document- 문서 정보. 웹페이지에 있는 모든 정보. 텍스트 등등..
  3. history-브라우저가 저장한 기록 조정. history.back()하면 뒤로가기가 됨.
  4. location- 문서 주소 관련 객체. window와 document의 프로퍼티임.
    1. location.host()호스트 정보 ,윈도우 문서 url변경 가능
  5. screen- 사용자 디스플레이 화면에 대한 정보 객체.

    image.png

  6. navigator- 실행중인 브라우저에 대한 정보.

image.png

자바스크립트 파일 가져오기 (순서, defer, async)

만약 이렇게 되어있고 script에서 btn을 접근하면 null이 된다. 왜냐면 파싱할때 순차적으로 파싱하고 script를 파싱할 때는 btn 파싱 전이기에 접근이 안된다.

``` 2. async- 똑같이 비동기로 가져오는데 가져오는대로 바로 실행. 즉 파싱 끝날때 까지 안기다리고 실행. 실행할때는 html파싱은 멈춤. 따라서 일반적으로는 defer를 많이 씀. ```