[ES6][JS] DOM과 BOM

◆목표

DOM의 정의
웹브라우저 동작과정
BOM의 정의

---

1. DOM(Document Object Model)의 정의

-구조화된 문서(Document)를 객체로 표현하는 방식

 

DOM TREE

 

2. 웹브라우저 동작 과정

   1) HTML 파일을 웹서버로 부터 가져옴

   2) 가져온 HTML 파일을 파싱(Parsing) 하여 Dom Tree 생성, Css 정보를 파싱(Parsing)하여 Cssom Tree 

       생성

   3) 파싱한 Dom Tree와 Cssom Tree를 기반으로 Render Tree를 생성

   4) 생성한 Render Tree로 Rendering을 하고 그것으로 사용자에게 페이지를 보여줌

 

Tip) 자바스크립트 선언 위치

      -  HTML 코드를 기반으로 DOM 트리를 구성하기 때문에 DOM 트리를 구성하기 전에 자바 스크립트로 HTML 태그에 접근

         할려고하면 오류가 발생함

      - 위와 같은 이유로 DOM 트리 구성이 끝난 후에 자바스크립트를 선언하는게 좋다. 그래서 </body> 태그 직전에 선언 및 추가한다.

Render Tree

 

3. BOM(Browser Object Model)의 정의

- Window 객체(전역객체)의 한 종류로 웹 브라우저를 제어하기 위해서 제공해주는 객체임

- 많이 사용되는 객체

   1) Navigator 객체

   2) Location 객체

   3) alert, confirm, prompt 등의 객체

 

Tip)  전역객체란?

      -  전역변수와 같은 개념으로 어디에서나 접근이 가능하다.  window 객체는 모든 객체가 소속된 객체이다.

      ex) window.alert() 와 alert() 는 같다. 

window 객체 리스트