🧩 오늘 한 일

DOM이란 무엇인가?

DOM(Document Object Model)은 HTML 문서 구조를 객체로 표현한 것

→ 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미

주로 자바스크립트에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용한다

DOM의 계층은 트리 형식으로 구축된다.

아래의 사진과 같이 document 노드가 맨 위에 있고, 그 밑으로 계층적 구조를 이루고 있다.

DOM이 생성되는 순서

HTML에서 <script> 태그에 JS 문법을 작성하는데, 웹 페이지는 HTML 파서에 의해서 DOM으로 변환된다. 이때 <script> 태그를 만나면 DOM 생성을 중지하고 자바스크립트 엔진이 script에 정의된 파일 및 코드를 실행한다. 스크립트 실행이 완료되면 다시 HTML 파서가 DOM 생성을 다시 시작한다.

브라우저는 동기적으로 HTML과 JavaScript를 처리하기 때문에 <script> 태그의 위치에 따라 DOM 생성이 느려질 수 있다. 따라서 <script> 태그는 HTML 문서 맨 하단에 넣는 것이 효율적이다.

🧠 배운 점 / 새로 알게 된 점

• 브라우저는 단순히 코드를 읽는 것이 아니라, HTML → DOM 트리, CSS → CSSOM 트리를 만든 후 이를 합쳐서 화면을 렌더링한다는 걸 배웠다.
• DOM을 조작할 때마다 브라우저는 Layout(레이아웃 계산)과 Paint(화면 그리기) 과정을 반복한다는 사실을 알게 되었다.
• 즉, 눈에 보이지 않아도 코드 한 줄이 브라우저의 작업량을 크게 바꿀 수 있음을 체감할 수 있었다.

CRP(웹페이지 빌드 과정)

1. DOM 트리 구축 - 브라우저가 HTML을 받아와서 DOM 트리를 만든다