11/18
도대체 DOM을 어디서 뭐하다가 마주친걸까... 이래서 바로바로 작성해야 하는데 잔뜩 밀려서 이럴 때마다 너무 슬프다
DOM 이란?
문서 객체 모델 DOM(Document Object Model) 은 HTML 문서 구조를 객체로 표현한 것이다. HTML 문서에는 <body>, <p> 등 여러 태그가 문서의 구조를 이루고 있는데, 이런 HTML 요소의 계층을 반영해서 만든 객체.
그래서 DOM이 왜 필요한가 하면, HTML문서를 객체로 표현하면 JavaScript 와 같은 스크립트와 언어가 웹페이지에 접근할 수 있게 된다. 즉, HTML로 구성된 웹 페이지와 스크립트 및 언어를 연결하는 역할을 하는 것.
DOM 의 계층 구조
DOM 의 계층은 트리 구조로 구축된다. 하나의 최상위 Node에서 각 태그별로 자식 노드들이 뻗어나가는 구조. document 가 제일 상위, 그리고 그 밑으로 element, text, attribute 로 구성된다.
이 중 element 는 또 태그로 <head>, <body> 등등으로 구성되는데.. 전부 다 쓰기보다는 잘 정리된 이미지가 좋을 것 같다. 토스 최고에요(?)
기타
DOM 의 생성 순서는 중요하다. HTML 웹 페이지는 HTML 파서로 DOM 으로 변환되는데, 이 과정에서 <script> 태그를 만나면 DOM 생성을 중지하고 JavaScript 엔진이 script 에 정의된 파일과 코드를 먼저 실행한다. 이후 DOM 생성을 재개하게 되는데...
즉, 브라우저가 동기적으로 HTML 과 JavaScript 를 처리하기 때문에, <script> 태그의 위치에 따라 생성 순서가 늦춰질 수 있다. 권장되는 방법은, <script> 태그를 HTML 문서 제일 하단에 넣는 것. DOM 생성을 먼저 완료하기도 하고, 스크립트에 DOM 을 접근하는 코드가 있는 경우도 방지되기 때문.
추가로, 웹페이지 빌드 과정인 CRP(Critical Rendering Path) 에서 보면, CSS 에도 구조화된 객체인 CSSOM 이 있다. DOM 과 CSSOM 이 둘이 합쳐져 렌더 트리를 생성하고, 레이아웃을 잡아 생성의 과정을 거치는 것. 적당히 이해는 했는데, 이미 궁금증은 해결되었으니 더 쓰는건 다음 기회로...
대신 참고한 링크를 남긴다.
[웹 개발 기초 자바스크립트] 7. DOM이란?
DOM (Document Object Model)은 웹 문서의 구조화된 표현입니다. 이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작합니다. 주로 자바스크립트에서 웹
velog.io
'공부 > TIL•기타' 카테고리의 다른 글
| JSON (0) | 2025.11.24 |
|---|---|
| 편한 유지보수를 위한 방법론 (0) | 2025.11.13 |
| Deprecated (0) | 2025.11.07 |
| SRMD (0) | 2025.11.06 |
| 개발 반성회 (1) | 2025.11.05 |
