🤷‍♂️ 돔(DOM)이란 무엇일까 ?

💡 What is DOM ??

    - 문서객체모델 DOM(Document Object Model)은 브라우저에 내장되어있는 web API이다.

웹페이지를 접속을 하면 개발자가 작성한 html코드를 브라우저가 이해 할 수 있는 node라는 object로 변환하고

DOM Tree를 구축해 나아가며 궁극적으로는 CSSOM과 함께 Render Tree에 적용됩니다.

API가 뭐지 ? -> 2020/12/21 - [지식] - 💡 Framework & Library & API?

💡 Framework & Library & API?

 

Render Tree ? -> 2021/01/13 - [지식] - 🔍 브라우저의 렌더링을 알아보자

🔍 브라우저의 렌더링을 알아보자

✨ DOM Tree

    - DOM Tree는 html을 node라는 오브젝트로 변환하며 나무와 같은 구조로 만들어 나아간다.

위와 같은 코드를 작성하였다고 가정해보자

이러한 형태의 DOM Tree를 구성하게 된다.

🎈 특징

    - DOM Tree는 우리가 View port에서 보이는 부분이 아니다. (실제로는 Render Tree가 보이는것)

    - display:none; 과 같은 뷰 포트상에서 보이지 않는 요소들도 DOM Tree 내부에는 포함이 되어있다.

    - 기술적으로는 ::before과 ::after 선택자와 같은 가상 요소는 DOM의 일부는 아니다.

    - DOM이 존재함으로써 우리가 Javascript 에서 html 태그들을 조작 할 수 있다.

참고 : https://velog.io/@surim014/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80#critical-rendering-path