DOM
DOM (Document Object Model) 핵심 요약
1. DOM의 기술적 정의
DOM은 정적인 HTML 텍스트를 브라우저가 이해할 수 있도록 메모리에 적재한 객체 기반의 트리 구조입니다. 자바스크립트는 이 DOM이라는 인터페이스(API)를 통해 화면의 내용을 동적으로 변경합니다.
2. DOM 생성 4단계 (Critical Rendering Path)
브라우저 엔진이 HTML을 읽어 DOM을 만드는 과정은 다음과 같습니다.
| 단계 | 과정명 | 설명 |
|---|---|---|
| Step 1 | Conversion | 서버에서 받은 바이트(Bytes) 데이터를 지정된 인코딩에 따라 문자열로 변환 |
| Step 2 | Tokenization | 문자열을 <html>, <body> 같은 의미 있는 단위인 **토큰(Token)**으로 분해 |
| Step 3 | Lexing | 각 토큰을 속성과 규칙을 가진 노드(Node) 객체로 변환 |
| Step 4 | Construction | 노드 간의 부모-자식 관계를 파악하여 최종적인 트리 구조(DOM) 완성 |
3. AST vs DOM 차이점 한눈에 보기
질문하신 컴파일러의 AST와 브라우저의 DOM을 비교해 봅시다.
-
공통점: 텍스트를 파싱하여 만든 트리(Tree) 데이터 구조임.
-
차이점:
-
AST: 코드를 실행하기 위한 중간 단계(분석용). 실행 후에는 보통 사라짐.
-
DOM: 브라우저 화면을 유지하고 조작하기 위한 최종 결과물(상주용). 자바스크립트로 언제든 수정 가능.
-
4. <script> 태그가 하단에 위치해야 하는 이유
브라우저는 HTML을 읽다가 <script>를 만나면 **"일단 정지(Blocking)"**합니다.
-
파싱 중단: 자바스크립트 파일을 다운로드하고 실행할 때까지 DOM 생성이 멈춥니다.
-
참조 에러: 만약
<head>에서 DOM을 조작하려 하면, 아직 밑에 있는 HTML 요소들이 노드로 생성되지 않아null에러가 발생합니다. -
사용자 경험: 스크립트 실행이 길어지면 화면이 뜨지 않아 사용자가 답답해할 수 있습니다.
💡 메타 인지 전략: 지식의 구조화
"HTML은 설계도이고, DOM은 그 설계도를 바탕으로 메모리에 실제 세워진 건물이다. 그리고 자바스크립트는 그 건물을 수리하는 인부다."라고 머릿속에 이미지화해 보세요. 훨씬 기억에 오래 남을 거예요!