[JS] DOM 이란?

 

DOM 

문서객체 모델(The Document Object Mode, DOM)은 HTML, XML 문서의 프로그래밍 interface

 

 

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

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

이 과정을 여러 단계로 나누어져 있지만, 대략 두 단계로 나눌수 있는데, 첫번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정하고 두 번째 단계에서 브라우저는 해당 렌더링을 수행.

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

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

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

 

 

DOM은 어떻게 생성될까?

DOM은 원본HTML문서의 객체 기반 표현 방식.

둘은 서로 비슷하지만, DOM이 가지고 있는 근본적인 차이는 단순 텍스츠로 구성된 HTML문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이 다름.

 

 

DOM이 아닌 것

1. DOM은 HTML이 아님

DOM은 HTML문서로부터 생성되지만 항상 동일하지 않음.

- 작성된 HTML문서가 유효하지 않을 때

  : DOM은 유효한 HTML문서의 인터페이스이며, DOM을 생성하는 동안 브라우저는 유효하지 않은 HTML코드를 올바르게 교정함.

- 자바스크립트에 의해 DOM이 수정될 때

 : DOM은 HTML문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있음.

 

2. DOM은 브라우저에 보이는 것이 아님

브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSDOM의 조합이며, 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과 다름. 달리 말하면, 렌더링 되는 요소만이 관련있기 때문에 시각적으로 보이지 않는 요소는 제외됨.

 

 

3. DOM은 개발도구에서 보이는 것이 아님

개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공하지만, 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함.

가장 좋은 예는 CSS의 가상요소가 있는데, '::before'과 '::after'선택자를 사용하여 생성된 가상 요소는 SCCDOM과 렌더 트리의 일부를 구성하게 되지만, 기술적으로 DOM의 일부는 아님. DOM은 오직 원본 HTML문서로부터 빌드되고, 요소에 적용되는 스타일을 포함하지 않기 때문.

이러한 이유로 가상 요소는 DOM의 일부가 아니기 때문에 자바스크립트에 의해 수정될 수 없음.