[테스트 코드] DOM

01. DOM

• Document: 문서 / Object: 객체 / Model: 모델
• 웹 페이지 빌드 과정(Critical Rendering Path CRP)
  • 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정
  1. 문서를 읽어들여서 그것들을 파싱하 고 어떤 내용을 페이지에 렌더링할지 결정(HTML, CSS) + javascript
  2. Render Tree
     • 브라우저가 DOM과 CSSOM을 결합하는 곳
     • 화면에 보이는 모든 콘텐츠의 콘텐츠와 스타일 정보를 모두 포함하 는 최종 렌더링 트리를 출력
     • 화면에 표시되는 모든 노드의 콘텐 츠 및 스타일 정보를 포함
  3. 브라우저가 페 이지에 표시되는 각 요소 의 크기와 위치를 계산
  4. 페인트 : 브라우저는 레이아웃 결 과를 선택하고 픽셀을 화면에 페인트

02. DOM Tree를 만드는 과정

• Bytes => Characters => Token => Node => DOM
  

03. DOM이란

• HTML이 브라우저의 렌더링 엔진에 의해 분석되고 분석이 모두 끝나고난 HTMl 파일
• HTML : 단순 텍스트로 구성
• DOM
  • HTML문서의 내용과 구 조가 객체 모델로 변화되어 다양한 프로그램에서 사용 가능
  • HTML 문서가 유효하지 않게 작성됐을때는 브라우저가 올바르게 교정
  • DOM은 자바스크립트에 의해 수정 가능, HTML은 수정 불가