DOM(Document Object Model)은 HTML, XML 문서를 구조화한 트리 형태의 모델로, 프로그래밍 언어를 통해 문서의 내용을 읽고 수정하거나 추가, 삭제할 수 있는 인터페이스를 제공합니다. 웹 페이지에서 동적으로 내용을 변경할 때 사용하는 기술입니다.
왜 DOM이 필요한가?
1. 브라우저 관점:
- 브라우저가 HTML/XML 문서를 구조화하여 이해하고 렌더링하기 위해 DOM이 필요합니다.
- DOM은 브라우저 내부에서 HTML을 처리하는 기본적인 데이터 모델입니다.
2. 프로그래밍 언어 관점:
- 프로그래밍 언어가 DOM을 통해 문서의 구조와 내용을 동적으로 제어할 수 있게 하기 위해 DOM이 필요합니다.
- DOM API는 프로그래밍 언어와 브라우저가 문서를 공유하는 "공통 언어" 역할을 합니다.
브라우저 렌더링 과정에서 DOM의 역할
- HTML 파싱:
- 브라우저는 HTML 파일을 읽고, 이를 파싱(분석)하여 DOM 트리를 만듭니다.
- DOM 트리는 HTML 문서의 계층 구조를 반영한 트리 구조입니다.
- CSS 파싱 및 렌더 트리 생성:
- 브라우저는 CSS 파일이나 <style> 태그를 파싱하여 CSSOM(CSS Object Model)을 만듭니다.
- DOM과 CSSOM을 합쳐 렌더 트리를 생성합니다.
- 렌더 트리는 화면에 표시될 요소와 스타일 정보를 결합한 구조입니다.
- 레이아웃 및 페인팅:
- 렌더 트리를 기반으로 브라우저는 각 요소의 위치와 크기를 계산(레이아웃 단계)한 후, 화면에 요소를 그립니다(페인팅 단계).
기본적인 지식의 범위 (필수라고 할 만한 수준)
백엔드 개발자라면 DOM에 대해 아래 정도는 알면 충분합니다:
- DOM이란 무엇인가?
- DOM은 HTML 문서를 브라우저가 트리 구조로 표현한 객체 모델이다.
- 이를 통해 JavaScript가 문서 구조를 읽고 수정할 수 있다.
- DOM의 기본 구조
- DOM은 부모-자식 관계의 트리 구조로 구성된다.
- 예: <html>이 최상위 노드이며, 그 아래에 <head>와 <body>가 자식 노드로 포함된다.
- DOM과 JavaScript의 관계
- JavaScript로 DOM 요소를 조작하거나 이벤트를 처리할 수 있다.
- 예: document.getElementById("id")로 특정 요소를 찾을 수 있다.
- DOM의 역할
- HTML, CSS, JavaScript 간의 상호작용을 담당한다.
- 브라우저에서 사용자의 요청에 따라 동적으로 웹 페이지를 수정할 수 있게 한다.
필수적이지 않은 심화 내용
- DOM 이벤트의 버블링/캡처링 과정.
- 복잡한 DOM 조작 방식 (예: React의 Virtual DOM).
- DOM API 세부사항이나 고급 활용법.
'개발기술 > 프론트엔드' 카테고리의 다른 글
| 백엔드 개발자와 프론트 엔드 이해도 (0) | 2025.02.12 |
|---|---|
| Java, Javascript, Python 비교 (1) | 2025.01.14 |
| 자바스크립트 Browser API (0) | 2024.07.08 |
| 톰캣 설치를 통한 JSP 사용법 (0) | 2024.07.01 |
| HTML, CSS (0) | 2024.06.09 |
