당일회고아닌 회고
이번주 수요일과 금요일에 수업을 참여하지 못하게 되어 (사전에 잡아놓은 여행땜시 ㅎ) 22일 수요일 블로깅은 DOM에 대해서 복습하기로 했다.
아주 열심히 하는 기수분들을 두고 여행을 간다는게 뒤쳐지지 않을까 심히 걱정은 된다만,,, 어쩌겠는가 더 열심히 공부해야지,, 이미 잡은 여행 가서 재밌게 놀고 오자 (여행가서 하루는 수업 듣는건 안 비밀)
공항에서 새벽공부하는 나의 열정 칭찬해~~~
복습
DOM(The Document Object Model) : 문서 객체 모델
DOM이란
웹페이지(HTML)의 콘텐츠 및 구조, 스타일요소를 구조화 시켜 표현하여
(예를 들면 div, span, input 등....)
프로그래밍 언어(javascript )가 해당 문서에 접근해 읽고 조작할 수 있도록 API를 제공하는 인터페이스임
DOM API의 본질은
html&css를js로 제어하는 걸 컴퓨터가 알아듣게 작성하는 법 이다.
즉html&css요소들을 js 에서 제어하기 위한 명령들이돔API이다.
API란?
API (Application Programming Interface) 란?
응용 프로그램에서 사용할 수 있도록,
운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스(명령어)
DOM이 필요한 이유
웹은 에초에 html으로 이루어진 문서를 공유하기 위해 만들어졌다.
하지만 html&css 만으로는 정적인 웹페이지만을 구상할수 밖에 없어 보다 더 동적인 문서를 공유하고 싶어 사람들이javascript라는 언어를 만들었고
html&css로 만든 문서들은 js 로 인해 정적에서 동적으로 제어하게 되었다.(제어하기위해 dom 필요!)HTML을 동적으로 보다 효율적으로 변경하기 위해서
HTML 문서를 자바스크립트(Javascript)가 이해할 수 있는 객체(Object)의 형태로 모델(Model)링 하여
자바스크립트(Javascript)에서 제어할 수 있도록 만든 인터페이스(interface)가 바로 DOM API인 것!!
DOM과 javascript의 관계
DOM은 프로그래밍 언어는 아니지만DOM이 없다면
자바스크립트 언어는 웹 페이지 및 요소들과 관련된 모델이나
개념들에 대한 정보를 갖지 못하게 된다.
문서의 모든 요소(element)들은문서를 위한
DOM(document object model)의 한 부분이다.
이러한 문서의(html&css) 요소들은DOM과자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.
JS는DOM을 조작할 수 있는 프로그래밍 언어 중에서 가장 유명한 언어
웹페이지를 만듦에 있어 거의 한 몸처럼 사용 되다 보니,
"JS 안에 DOM 이 있다거나 DOM을 JS으로만 다룰 수 있는거 아니냐" 와 같은 오해가 생기기도 함!
그러나 JS 와 DOM 은 완전 다른 개념이며, JS를 통해서만 DOM을 조작할 수 있는 것도 아님!
<script> 태그의 위치
html에서<script>태그를 가장 하단에 위치하는 이유는?
이를 이야기 함에 있어 먼저 알아야 하는 것이 브라우저의 작동 방식이다.
브라우저의 작동방식으로는
- HTML을 읽기 시작
- HTM을 파싱함.
- DOM 트리 생성
- DOM 트리에 CSS의 CSSOM 트리가 결합되어 = Render 가 생성됨
- 화면에 표시!
위의 순서로 작동됨
여기서 만약 중간에<script>태그가 위치해있다고 가정해보자
위의 사진처럼 브라우저는 1,2,3 의 순서로 DOM 트리를 생성하는데 이 순서를 진행하는 중간에<script>태그가 있다면 브라우저는 즉시 HTML 파싱을 중단하고<script>파일을 읽어javascript코드 파싱을 진행한다. 완료되면 그 후에 다시 중단되었던 HTML의 파싱을 계속 이어 간다.
그렇기 때문에<script>태그를 최하단에 위치시켜 html의 파싱작업을 중단시키는 일이 없도록 하는게 best 다!!왜 best 냐고?
1. html 파싱을 중간에 중단하고<script>태그를 파싱하고 하면 그만큼 화면에 표시되는게 딜레이 되기 때문
2. DOM 트리가 생성되기도 전에<script>태그로 인해 자바스크립트가 DOM의 조작을 시도할 수 있다.
그렇기 때문에 최하단에<script>태그를 위치시키는 걸 추천함!!
출처 [https://blog.asamaru.net/2017/05/04/script-async-defer/]
