DOM 그리고 script
어떻게 그들은 돌아가는가
Dom이란?
javascript는 웹문서 제어를 위해 태어남. html조작을 위해 태어남.
브라우저 안에 웹 문서를 해석할 수있는 렌더링 엔진이 html문서를 해석해서 javascript가 접근할 수 있는 객체로 만든다.
tree구조를 지님. 부모태그와 n개 자식 태그를 가질 수 있음.
브라우저 제어 모델링을 bom. document객체는 dom tree최상위이고 이는 객체 접근하는 진입점임.
즉 다큐먼트 객체→도큐먼트 객체 접근→프로퍼티로 제어.
DOM은 브라우저에서 js로 html요소를 제어할 수 있도록 제공하는 api. api는 브라우저에서 제공하는 기능임.
BOM
브라우저 객체모델. 웹 브라우저를 객체화 한것. 이것도 js로 제어하기 위해 만듦. 브라우저 자체 뭐 탭이나 등등을 만지기 위해 객체화한것.
browser 객체
- window- 브라우저 창. 모든 객체가 소속되어있음. (생략가능)
window.open('https://google.com)
이거 하면 새 탭이 열림.- window.close(), window.alert()
- document- 문서 정보. 웹페이지에 있는 모든 정보. 텍스트 등등..
- history-브라우저가 저장한 기록 조정. history.back()하면 뒤로가기가 됨.
- location- 문서 주소 관련 객체. window와 document의 프로퍼티임.
- location.host()호스트 정보 ,윈도우 문서 url변경 가능
-
screen- 사용자 디스플레이 화면에 대한 정보 객체.
- navigator- 실행중인 브라우저에 대한 정보.
자바스크립트 파일 가져오기 (순서, defer, async)
만약 이렇게 되어있고 script에서 btn을 접근하면 null이 된다. 왜냐면 파싱할때 순차적으로 파싱하고 script를 파싱할 때는 btn 파싱 전이기에 접근이 안된다.
``` 2. async- 똑같이 비동기로 가져오는데 가져오는대로 바로 실행. 즉 파싱 끝날때 까지 안기다리고 실행. 실행할때는 html파싱은 멈춤. 따라서 일반적으로는 defer를 많이 씀. ```