DOM이 그래서 정확히 뭘까?

DOM은 웹 페이지에 대한 인터페이스입니다.
여러 프로그램들이 페이지의 구조 및 내용,
그리고 스타일을 읽고 조작할 수 있도록
API를 제공합니다.

라고는 하는데 무슨 말인지 잘 와닿지 않죠?
저도 그랬습니다.

DOM이 무엇인지 정확히 이해하려면
웹 페이지가 어떻게 만들어지는지 알고 있어야 합니다.

웹 브라우저는 서버로부터 받은
원본 HTML 문서대로 웹 페이지를 그립니다.
이때 브라우저는 HTML 내 모든 내용을 렌더링하지 않고,
일련의 선택을 통해
최종적으로 렌더링 될 내용을 결정합니다.
이 과정에서 렌더 트리라는 것이 생성됩니다.
렌더 트리는 웹 페이지에 표시될 HTML 요소들과
이와 관련된 스타일 요소들로 구성됩니다.
즉, 렌더 트리는 다음 두 가지로 이루어져 있습니다.

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

위에서 볼 수 있듯 DOM은
웹 페이지가 어떻게 꾸며질 것인지 정의한
스타일 요소를 빼고
웹 페이지의 구조를 정의한
뼈대만 담은 문서인 것이죠.
따라서 원본 HTML 문서와는 분명한 차이가 있습니다.

DOM은 HTML 문서의 내용을 객체 모델로 바꾸어
다양한 프로그램에 사용될 수 있도록 합니다.
DOM의 객체들은 나무와 같은 구조로 표현됩니다.
이것을 노드 트리라고 합니다.
하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고,
각 나뭇가지는 여러 잎을 갖습니다.

다음 예시는 HTML 코드와
이것을 노드 트리로 구조화한 모습입니다.

위 예시만 보면 DOM은 HTML 문서와
1:1 매칭되는 것처럼 보입니다.
하지만 앞서 말씀드렸듯, DOM은 HTML과 다릅니다.
DOM은 유효하지 않은 HTML 코드를
올바르게 수정하여 나타냅니다.
또한, JavaScript를 쓰면
DOM에 새로운 노드를 추가할 수 있습니다.
이때 원본 HTML 문서의 내용은 바뀌지 않습니다.

개발자 도구 창을 열면 Elements에서
HTML 코드가 보이는데요.
이것은 DOM이 아닙니다.
개발자 도구의 Elements가
가상 요소를 포함하고 있는 것을 보면
DOM이 아니라는 것을 알 수 있습니다.

요약

DOM은 HTML 문서에 대한 인터페이스로, 

HTML 요소들을 구조화하여 표현한 것입니다.
뷰 포트에 무엇을 렌더링 할지 결정하거나
페이지의 콘텐츠 및 구조와 스타일을

JavaScript 프로그램으로 수정하기 위해 사용됩니다.

DOM은 원본 HTML 문서 형태와 비슷하지만
몇 가지 차이점이 있습니다.

• 항상 유효한 HTML 형식입니다.
• JavaScript로 수정할 수 있는 동적 모델입니다.
• 가상 요소를 포함하지 않습니다. (예. ::after)
• 보이지 않는 요소를 포함합니다. (예. display: none)

 

출처

https://wit.nts-corp.com/2019/02/14/5522