DOM (Document Object Model)

문서 객체 모델로 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해주는 모델

웹 페이지 이루는 요소들을 JS가 이용 가능하게끔 브라우저가 트리구조로 만든 객체 모델

---

DOM 조작

DOM에서 제공해주는 API이용해서 조작 가능

DOM내 'button'클래스를 가진 요소 접근

요소의 스타일을 직접 변경 -> DOM 조작

---

웹 페이지 빌드 과정

CRP (Critical Rendering Path)

1. 브라우저가 서버에서 페이지에 대한 HTML 응답

2. HTML 문서를 읽고, 스타일 입히기

3. View Port에 표시

출처 : dimension85.com

1. Dom 트리 생성

• 렌더 엔진이 문서를 읽어들인 후 파싱
• 어떤 내용을 페이지에 렌더징할 지 결정
  
  

2. Render 트리 생성

• 브라우저가 DOM과 CSSOM을 결합하는 곳
• 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리 출력
• 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보 포함
  
  

3. Layout (Reflow)

• 브라우저가 페이지에 표시되는 각 요소의 크기와 위치 계산
  
  

4. Paint

• 실제 화면에 그리기