자바스크립트의 핵심이자 웹 페이지를 동적으로 변화시키는 마법의 지팡이, **DOM(Document Object Model, 문서 객체 모델)**에 대해 알아보겠습니다.
https://eyabc.github.io/Doc/dev/core-javascript/Browser_DOM_Tree.html#node-type
📘 DOM(문서 객체 모델)의 정의
DOM은 웹 브라우저가 HTML 문서를 읽어 들인 후, 이를 자바스크립트와 같은 프로그래밍 언어가 이해하고 조작할 수 있도록 객체(Object) 형태로 만든 모델을 말합니다.
- Document: 웹 페이지 문서 그 자체를 의미합니다.
- Object: 문서 내의 제목, 이미지, 텍스트 등을 각각의 '객체'로 변환합니다.
- Model: 문서의 구조를 논리적인 형태로 표현한 방식입니다.
🌲 DOM 트리 (DOM Tree)
웹 브라우저는 HTML 소스 코드를 계층적인 구조로 변환하는데, 이를 DOM 트리라고 부릅니다. 마치 나무의 뿌리(Root)에서 가지가 뻗어 나가고 잎사귀가 달리는 모양새와 비슷하기 때문입니다.
- 계층 구조: <html>은 뿌리가 되고, 그 아래 <head>와 <body>라는 큰 가지가 생기며, 그 안에 다시 다양한 요소들이 가지를 칩니다.
- 노드(Node): 트리를 구성하는 각 구성 요소를 '노드'라고 합니다.
- 문서 노드: 트리 전체의 시작점인 document입니다.
- 요소 노드: <div>, <h1> 같은 HTML 태그들입니다.
- 텍스트 노드: 태그 안에 적힌 실제 글자들입니다.
- 속성 노드: class, id 같은 태그의 속성들입니다.
🔗 HTML 요소와의 관계
DOM은 HTML 문서와 자바스크립트를 연결해 주는 통역사 역할을 합니다.
- 동적 연결: 원래 HTML은 한 번 화면에 그려지면 내용을 바꿀 수 없는 정적인 상태입니다.
- 객체로의 변환: 브라우저가 HTML 요소를 DOM 객체로 변환하면, 자바스크립트는 이 객체를 찾아내어 색상을 바꾸거나 내용을 수정할 수 있습니다.
- 실시간 반영: 자바스크립트로 DOM 객체를 수정하면, 브라우저는 이를 즉시 감지하여 웹 페이지의 화면을 실시간으로 업데이트합니다.
오늘의 요약
- DOM은 HTML 문서를 프로그래밍 언어가 다룰 수 있게 객체로 만든 것이다.
- 문서의 구조는 DOM 트리라는 계층적인 나무 모양으로 표현된다.
- 자바스크립트는 DOM을 통해 HTML 요소에 접근하고 내용을 자유자재로 수정한다.
자바스크립트 교재의 첫 단추인 DOM의 개념을 완벽히 정리하셨습니다!
'JavaScript' 카테고리의 다른 글
| Built in object (0) | 2026.02.14 |
|---|---|
| BOM (0) | 2026.02.14 |
| DOM Selection and Manipulation (0) | 2026.02.14 |
| DOM Event Handling (0) | 2026.02.14 |
| DOM Node (0) | 2026.02.14 |