DOM이란?
DOM(Document Object Model: 문서 객체 모델)은 웹페이지에 대한 인터페이스입니다.
HTML 문서 내용과 구조가 객체 모델로 변환된 것으로,
다양한 프로그램(ex. javascript)에서 페이지의 콘텐츠, 구조, 스타일을 읽고 조작할 수 있는 API를 제공합니다.
DOM의 구조는 노드트리로 표현됩니다.
DOM에서 구분해야 할 것
1. DOM은 HTML과 1대1 대응되지 않을 수 있습니다.
DOM은 HTML을 객체 모델로 변환한 것이므로, 가진 요소는 동일해야 하지만 다를 수 있습니다.
두 가지 경우가 있습니다.
- 작성된 HTML 문서가 유효하지 않을 때
- DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML코드를 올바르게 교정합니다.
- 따라서, 교정 전 HTML 코드는 교정 후 HTML을 반영한 DOM 트리와 대응되지 않습니다.
- 자바스크립트에 의해 DOM이 수정될 때
- 이 때 DOM은 업데이트되지만, HTML 문서 자체의 내용을 변경하진 않습니다.
2. DOM은 브라우저에서 보이는 것이 아닙니다.
브라우저 뷰포트에 보이는것은 렌더트리(DOM + CSSOM)입니다.
*DOM 트리는 HTML의 모든 요소를 가지고 있다면, 렌더트리는 스크린에 그려지는 요소들만 가지고 있습니다.
3. DOM은 개발도구와 1대1 대응되지 않을 수 있습니다.
개발 도구의 요소 검사기는 DOM에 없는 추가적인 정보도 포함하기 때문입니다.
예를 들면 CSS의 가상요소(Pseudo-Element)입니다.
*가상요소: 선택한 요소의 일부분에 스타일을 입히는 선택자입니다.
CSS에 포함되므로 DOM의 일부가 아니지만 개발도구 HTML에서 보입니다.
DOM의 일부가 아니므로 자바스크립트에 의한 조작이 불가능합니다.
[참고자료]
https://wit.nts-corp.com/2019/02/14/5522