DOM Tree (Document Object Model Tree)
DOM(Tree)은 HTML 또는 XML 문서를 계층적 구조로 표현한 모델로, 웹 브라우저가 문서를 파싱할 때 생성합니다. DOM은 문서의 각 요소를 객체로 취급하며, 개발자는 이를 JavaScript와 같은 프로그래밍 언어를 사용해 동적으로 조작할 수 있습니다.
1. DOM이란?
- DOM(Document Object Model)은 웹 문서(HTML, XML 등)의 구조를 프로그래밍적으로 표현한 인터페이스입니다.
- 문서를 트리(Tree) 구조로 표현하며, 각 노드(Node)가 문서의 요소를 나타냅니다.
- DOM은 플랫폼에 독립적이며, 브라우저가 이를 통해 문서를 렌더링합니다.
2. DOM Tree의 구조
DOM Tree는 계층적 노드 구조로 이루어져 있습니다. 노드는 크게 다음과 같은 종류로 나뉩니다:
노드(Node)의 종류
- 문서 노드 (Document Node)
- DOM 트리의 최상위 루트 노드로, HTML 문서 자체를 의미합니다.
- 예:
<html>
- 엘리먼트 노드 (Element Node)
- HTML 태그를 나타내는 노드입니다.
- 예:
<body>,<div>,<h1>등.
- 텍스트 노드 (Text Node)
- 태그 내부의 텍스트 콘텐츠를 나타내는 노드입니다.
- 예:
<p>Hello</p>에서Hello가 텍스트 노드.
- 속성 노드 (Attribute Node)
- HTML 요소의 속성을 나타내는 노드입니다.
- 예:
<img src="image.jpg" alt="example">에서src와alt.
- 주석 노드 (Comment Node)
- HTML 주석(
<!-- 주석 -->)을 나타내는 노드입니다.
- HTML 주석(
3. DOM Tree의 시각적 표현
예를 들어, 아래와 같은 HTML 코드가 있다고 가정합니다:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
이 문서는 다음과 같은 DOM 트리로 표현됩니다:
Document
└── html (문서 노드)
├── head (엘리먼트 노드)
│ └── title (엘리먼트 노드)
│ └── "Document" (텍스트 노드)
└── body (엘리먼트 노드)
├── h1 (엘리먼트 노드)
│ └── "Hello, World!" (텍스트 노드)
└── p (엘리먼트 노드)
└── "This is a paragraph." (텍스트 노드)4. DOM Tree의 특징
- 계층적 구조
- DOM Tree는 부모-자식 관계를 기반으로 요소들이 구성됩니다.
- 각 노드는 하나의 부모를 가지며, 여러 자식을 가질 수 있습니다.
- 동적 조작 가능
- JavaScript를 통해 DOM 요소를 추가, 삭제, 수정할 수 있습니다.
예:document.getElementById("id")로 특정 요소를 조작.
- JavaScript를 통해 DOM 요소를 추가, 삭제, 수정할 수 있습니다.
- 이벤트 바인딩
- DOM 트리를 기반으로 이벤트를 특정 노드에 바인딩할 수 있습니다.
예: 클릭 이벤트를 특정 버튼에 연결.
- DOM 트리를 기반으로 이벤트를 특정 노드에 바인딩할 수 있습니다.
5. DOM 조작 예시
요소 선택
let heading = document.querySelector('h1'); // <h1> 요소 선택내용 변경
heading.textContent = "Welcome!"; // <h1> 내용 변경새로운 요소 추가
let paragraph = document.createElement('p'); // <p> 요소 생성
paragraph.textContent = "New paragraph!"; // 내용 추가
document.body.appendChild(paragraph); // <body>에 추가속성 변경
let img = document.querySelector('img');
img.setAttribute('alt', 'Updated Alt Text'); // 속성 변경6. DOM Tree와 브라우저의 역할
- HTML 파싱 | 브라우저는 HTML 문서를 로드하고 DOM Tree를 생성합니다.
- CSSOM과 결합 | DOM Tree와 CSSOM(CSS Object Model)이 결합하여 렌더 트리를 만듭니다.
- 렌더링 | 렌더 트리를 기반으로 브라우저 화면에 문서를 표시합니다.
결론
DOM Tree는 HTML 문서를 트리 구조로 표현한 모델로, 문서를 동적으로 조작하고 렌더링하는데 핵심 역할을 합니다. DOM은 JavaScript를 사용해 웹 페이지를 인터랙티브하게 만들 수 있는 강력한 도구입니다.
728x90
'Software Tech > Javascript (feat.HTML)' 카테고리의 다른 글
| Web Socket (웹 소켓) (1) | 2024.12.14 |
|---|---|
| RESTful API (0) | 2024.12.14 |
