웹 브라우저 DOM 파서

웹 브라우저의 DOM 파서는 HTML 문서를 읽고, 이를 DOM(Document Object Model) 트리로 변환

브라우저가 문서를 렌더링하고 상호작용할 수 있도록 만듦

토크나이징 단계에서는 HTML 문서를 문자 단위로 읽어들이고, 이를 의미 있는 토큰으로 변환

HTML5 사양에 정의된 토크나이저를 기반으로 수행됨

데이터 상태(Data State)
- HTML 문서를 처음부터 끝까지 읽음
- 각 문자를 읽어들이며, 현재 상태에 따라 다음 상태로 전환
- 주요 상태
  - 데이터 상태: 기본 상태로, 일반 텍스트를 처리
  - 태그 열림 상태: < 문자를 만나면 태그 열림 상태로 전환
  - 태그 이름 상태: 태그 이름을 읽어들임
  - 속성 이름 상태: 태그의 속성 이름을 읽어들임
  - 속성 값 상태: 태그의 속성 값을 읽어들임
토큰 유형
- 시작 태그 토큰: <div>와 같은 시작 태그를 나타냄
- 종료 태그 토큰: </div>와 같은 종료 태그를 나타냄
- 문자 데이터 토큰: 텍스트 콘텐츠를 나타냄
- 주석 토큰: 와 같은 주석을 나타냄
- DOCTYPE 토큰: <!DOCTYPE html>과 같은 문서 유형을 나타냄

트리 구성 단계에서는 토크나이저가 생성한 토큰을 받아들여 DOM 트리를 구성

HTML 파서의 핵심 작업으로, 문서의 구조를 정의

트리 구축 상태
- 초기 상태: 트리 구성 과정이 시작되는 상태
- HTML 상태: <html> 태그를 처리
- 본문 상태: <body> 태그와 그 안의 내용을 처리
- 프레임셋 상태: <frameset> 태그를 처리
- 텍스트 상태: 텍스트 노드를 처리
트리 생성
- 요소 삽입: 시작 태그 토큰을 만나면 새로운 요소를 생성하여 현재 노드에 자식 노드로 추가
- 요소 종료: 종료 태그 토큰을 만나면 현재 요소의 닫힘을 처리
- 텍스트 노드 생성: 문자 데이터 토큰을 만나면 텍스트 노드를 생성하여 현재 노드에 자식 노드로 추가
노드 유형
- 요소 노드: <div>와 같은 HTML 요소를 나타냄
- 텍스트 노드
- 주석 노드
- 문서 유형 노드: 문서의 DOCTYPE을 나타냄

HalexH