반응형
태그로 보는 DOM 구조
HTML 문서의 DOM(Document Object Model) 구조를 태그를 기준으로 살펴보겠습니다. 간단한 HTML 예시를 통해 DOM 구조를 설명하겠습니다.
HTML 예시:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph.</p>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>이 HTML 문서를 DOM 트리로 변환하면 다음과 같은 구조를 갖습니다:
- Document 노드: 모든 DOM 트리의 최상위 노드입니다. 이 예시에서는 전체 HTML 문서를 대표합니다.
- Element 노드: HTML 태그들이 DOM 트리에서 Element 노드가 됩니다. 예를 들어,
<html>,<head>,<body>,<h1>,<p>,<div>,<ul>,<li>태그들이 각각 Element 노드로 변환됩니다. - Text 노드: HTML 요소 내의 실제 텍스트는 Text 노드가 됩니다. 예를 들어,
<h1>태그 안의 "Welcome to My Website" 텍스트는<h1>요소의 자식 노드인 Text 노드가 됩니다. - Attribute 노드: 태그의 속성들은 Attribute 노드로 표현됩니다. 이 예시에서는 속성이 표시되지 않았지만, 예를 들어
<div class="container">와 같이 클래스 속성이 있다면, 이는<div>의 Attribute 노드가 됩니다.
DOM 트리는 이렇게 태그, 텍스트, 속성 등을 노드로 변환하여 문서의 계층적 구조를 나타냅니다. 이 구조를 통해 JavaScript와 같은 프로그래밍 언어가 HTML 문서의 각 부분에 접근하고, 조작할 수 있게 됩니다. 웹 페이지를 동적으로 만드는 데 필수적인 이 구조는 웹 개발의 중요한 기초를 이룹니다.
반응형
'온라인 멘토와 함께하는 공부 > HTML' 카테고리의 다른 글
| [HTML] CSS에 대하여 (28) | 2023.12.26 |
|---|---|
| [HTML] HTML과 XHTML 비교 (23) | 2023.12.25 |
| [HTML] DOM(문서 객체 모델)이 작동하는 원리 (32) | 2023.12.23 |
| [HTML] CSS에서 포지셔닝(positioning) (46) | 2023.12.10 |
| [HTML] 마진, 테두리, 패딩, 콘텐츠 비교 (4) | 2023.12.09 |
