DOM 알아보며 나한테 묻는 QA

개발 2022. 3. 15. 21:41

Q: DOM과 HTML의 차이점은?

A: DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지는 않습니다.

HTML은 화면에 보이고자 하는 구조를 문서화 한 것으로 단순 텍스트로 구성되어 있고,
DOM은 HTML 문서의 내용과 구조가 Object Model로 변화되어 실제 화면에 나타나는 인터페이스 입니다.

<!DOCTYPE html>
<html>
  DOM과 HTML의 차이점은?
</html>

위와 같이 HTML 규칙의 필수 사항인 요소들이 빠져있지만 DOM트리에는 올바르게 교정되어 나타난 것을 보아 유효하지 않은 HTML 코드들을 DOM을 생성하는 동안 규칙에 맞게 교정하고 있는 것을 알게 되었습니다.

또한 JavaScript로 DOM을 수정할 때에도 마찬가지입니다.

let p = document.createElement('p');
let PText = document.createTextNode('DOM과 HTML의 차이점은?');
p.appendChild(pText);
document.body.appendChild(p);

이유는 DOM은 HTML문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되기도 해서 수정이 가능합니다.

따라서 DOM에 노드를 추가하는 코드로 업데이트는 했지만 HTML에 직접 작성한 것은 아니므로 문서의 내용을 변경한 것은 아닙니다.

A: DOM 브라우저에서 보이는 것이 아닙니다.

Render Tree는 DOM과 CSSOM의 조합으로 최종적으로 브라우저에 나타낼 노드들만 선별되어 트리가 생성이 됩니다.

때문에 시각 적으로 보여지지 않는 요소들은 제외되기 때문에 DOM과는 다릅니다.

이런 이유가 DOM Tree와 Render Tree의 차이점이기도 합니다.

A: 엄밀히 말하면 DOM은 개발자도구에서 보이는 것이 아닙니다.

개발자도구 요소 검사기는 DOM과 가장 가까운 근사치를 보여주긴 하지만 DOM에 없는 추가적인 정보까지도 포함하고 있습니다.

예를들어 CSS의 가상요소를 사용하여 생성된 요소는 CSSOM과 Render Tree의 일부를 구성하지만 DOM은 오직 원본 HTML 문서로부터 빌드되고, 요소에 적용되는 스타일은 포함되지 않기 때문에 DOM의 일부는 아닙니다.

최적화에 대해 알아보며 나한테 묻는 QA (0)	2022.03.31
Execution Context 알아보며 나한테 묻는 QA (0)	2022.03.16
브라우저의 렌더링 과정 & Render Tree와 DOM Tree의 차이점 (0)	2022.03.15
GraphQL - [ useQuery & useLazyQuery ] (0)	2021.02.17
API Documentation - PostMan (0)	2021.01.27