DOM 소개

DOM은 정확히 무엇일까? | WIT블로그

전체적인 이해가 없는데 나에게 javascript Framework 부터 시작하면 아무 것도 이해하지 못할 것이다. 기초 지식 중 제일 중요하다고 생각하는 부분을 가다듬어 보자.

DOM은 무엇인감?

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.

그 전에 이해할려면 웹 페이지가 어떻게 빌드 되는지 이해하고 있어야 한다.

웹 페이지는 어떻게 만들어 지지?

웹 브라우저가 원본 HTML 문서로 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어서 뷰 포트에 표시하기 까지 과정을 Critical Rendering Path라고 한다.

크게 2단계로 나눈다. (세부로 더 나눌수 있다.)

  1. 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정한다.
  2. 두 번째 단계에서 브라우저는 해당 렌더링을 수행합니다.

첫 번째 과정을 거치면 렌더 트리가 생성되는데, 렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다. 브라우저는 렌더 트리를 생성하기 위해 다음과 같이 두 모델들이 필요합니다.

DOM

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 그러나 DOM은 HTML문서의 내용과 구조가 객체 모델로 변환되어서 다양한 프로그램에서 사용될 수 있다는 점이 있다.

DOM의 개체 구조는 노드 트리로 표현된다.

요약정리

DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.