DOM (Document Object Model)
브라우저가 텍스트 파일로 만들어진 웹 문서를 이해하려면 파싱해야하는데 이를 DOM이라고 한다. 즉, DOM은 웹 브라우저가 HTML을 인식하는 방식이다. DOM은 웹 문서 내에 모든 요소와 요소의 어트리뷰트, 텍스트 각각을 객체로 만들고 트리 구조로 구성한다.
목적
- 다양한 환경과 애플리케이션에서 사용할 수 있는 표준 인터페이스 제공
- XML/HTML 문서의 접근 및 수정
구조
DOM의 개체 구조는 노트 트리로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문이다. 이렇게 트리형으로 구조화 되어 있기 떄문에 JS 같은 스크립팅 언어로 원하는 element에 접근하여 조작이 가능해진다.
DOM API
웹 문서를 동적으로 변경하기 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 일반적으로 프로퍼티와 메소드를 갖는 JavaScript객체로 제공한다. 이를 DOM API라고 한다.
+ 웹페이지는 어떻게 만들어지는가 ?
웹 브라우저가 원본 HTML 문서를 읽은 후 스타일을 입히고 대화형 페이지로 만들어서 viewport에 표시하는 과정을 CRP(critical rendering path)라고 한다. 첫번째 단계에서 브라우저는 문서를 파싱해 어떤 내용을 페이지에 렌더링할지 경정하고, 두번째 단계해서 해당 렌더링을 수행한다. 첫번째 과정을 거치면 렌더 트리가 생성되는데 이는 웹페이지에 표시될 HTML요소들과 이와 관련된 스타일 요소들로 구성한다. 브라우저는 렌더트리를 생성하기위해 DOM, CSSOM 두개의 모델이 필요하다
CSSOM(Cascading Style Sheets Object Model) : HTML요소들과 연관된
스타일 정보의 구조화된 표현 