[JavaScript] 필수 개념 DOM , BOM 이란?

DOM - Document Object Model

(window.document)

 

BOM - Browser Object Model

(window.location),

(window.navigator),

(window.screen),

(window.history)

.

.

.

---

1) BOM 

- 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있다.

- 이 브라우저와 관련된 객체 집합이 브라우저 객체 모델(BOM) - 이 BOM을 이용해 브라우저와 관련된 기능을 구성한다.

- DOM은 BOM 중 하나

- BOM의 최상위 객체는 window객체

- window.location

- window.navigator

- window.screen

- window.history

- …

- DOM은 window 객체의 하위 객체

- window.document 객체를 DOM이라고 분류한다.

 

 

2) DOM

- Document Object Model의 약자. 문서객체 모델

- 우리가 웹 사이트에 접속하면, 웹 브라우저는 HTML 문서를 읽어들이고 해석한다.

- 이 브라우저가 HTML코드를 해석하는 과정을 ‘파싱’이라 부른다.

- 파싱 결과물을, 화면을 통해 해석된 결과를 보여준다.

  해석한 HTML 코드를 화면에 보여주는 과정이 렌더링이며, 결과물로 DOM이 만들어진다.

- 브라우저는 HTML 코드를 해석하여, HTML 요소들을 트리 형태로 구조화하여 표현하는 웹 문서를 생성한다.

  이 트리 전체를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.

- 트리를 구성하는 요소 하나하나를 Node라고 한다.

- 자바스크립트로 웹 페이지 요소를 제어할 수 있는 것은 이것들 하나하나가 모두 API이기 때문

-  API는 소프트웨어 개발에서 호환성을 위해 지켜야 하는 추상적인 원칙.

- 애플리케이션을 서로 연결해서 서로 통신할 수 있도록 하는 인터페이스 원칙이라고 생각하자

- DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고 각 요소에

  접근하는 방법을 제공한다.

 

 

3) 웹 페이지가 만들어지는 방법 :

CRP - CRP(Critical Rendering Path) : 웹 브라우저가 원본 HTML문서를 읽어들인 후,

   스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정

- DOM트리 구축

- CSSOM 트리구축

- JS 실행

- 렌더 트리 구축

- 레이아웃 생성

- 페인팅

- CRP 과정을 렌더트리 구축 기점으로 간소화하면 2단계로 나누어짐

- 1단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다.

   (렌더트리 생성됨)

- 2단계 : 브라우저는 해당 렌더링을 수행한다.

- 렌더 트리 : 웹 페이지에 표시될 HTML, 스타일 요소로 구성된다.

   브라우저는 렌더트리를 생성하기 위해 두 모델을 필요로 한다.

- *DOM(Document Object Model)* : HTML 요소들의 구조화된 표현

- *CSSOM(Cascading Style Sheets Object Model)* : 요소들과 연관된 스타일 정보의 구조화된 표현

 

4) DOM의 목적

- DOM은 자바스크립트를 활용해 문서에 대한 스크립트를 작성하는 것에 목적이 있다.

  즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있다는 뜻이다.

- 뷰 포트에 무엇을 렌더링할지 결정하기 위해 사용된다.

- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.

- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.

- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.

- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.

- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.

- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.

- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다

- HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적 상호작용을 하기 위해서는, DOM의 존재가 중요해진다.