DOM (Document Object Model)
ul, header, img 등의 하나하나 요소를 element라고 하며
이 모든 것을 담고 있는 웹 페이지를 문서라고 칭한다.
DOM은 웹페이지에 들어가는 element 요소를 트리 형태의 구조로 표현한 것이다.
DOM 트리 안에는 각각의 element에 node가 들어있다.
node란?
tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현한다.
head, body, title, script, h1, HEADER-1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속한다.
HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 한다.
개발자는 DOM이 제공하는 API를 통해 DOM에 접근을 하고 원하는 Element의 내용, 구조를 바꿀 수 있다.
이러한 행위를 DOM 조작이라고 한다.
DOM의 생성 과정 예시
DOM의 특징
-
DOM은 HTML이 아닙니다.
DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있습니다.
예를 들어, 자바스크립트를 사용해 DOM에 새로운 노드를 추가할 수 있습니다.
이 코드는 DOM을 업데이트합니다. 하지만 HTML 문서의 내용을 변경하진 않습니다.
- DOM은 브라우저에서 보이는 것이 아닙니다.
렌더링 되는 요소만이 관련 있기 때문에 시각적으로 보이지 않는 요소는 제외됩니다.
예를 들어, display: none 스타일 속성을 가지고 있는 요소입니다.
DOM은 <p>요소를 포함시킵니다.
그러나 렌더 트리에 해당하는 뷰 포트에 표시되는 내용은 <p>요소를 포함하지 않습니다.
-
DOM은 개발도구에서 보이는 것이 아닙니다.
개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공합니다. 그러나 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함합니다.
가장 좋은 예는 CSS의 가상 요소입니다. ::before 과 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성합니다.
하지만, 기술적으로 DOM의 일부는 아닙니다. DOM은 오직 원본 HTML 문서로부터 빌드 되고, 요소에 적용되는 스타일을 포함하지 않기 때문입니다.
가상 요소가 DOM의 일부가 아님에도 불구하고, 요소 검사기에서는 아래와 같이 확인됩니다.
💡Virtual DOM - 가상돔
ex)
DOM - 실제 가구
VIrtual DOM - 가구 미니어처웹사이트는 변경이 되면 바뀐 부분을 알기 어려워서 페이지를 새로 리로딩한다.
그래서 웹 페이지가 깜빡하고 하얘졌다가 다시 나타난다.
Virtual DOM을 사용하면 바뀐 부분을 체크했다가 그 부분만 만들어준다.
