온라인 멘토와 함께하는 공부/HTML

[HTML] 태그로 보는 DOM 구조

열공노년 2023. 12. 24. 06:15
반응형

태그로 보는 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 트리로 변환하면 다음과 같은 구조를 갖습니다:

  1. Document 노드: 모든 DOM 트리의 최상위 노드입니다. 이 예시에서는 전체 HTML 문서를 대표합니다.
  2. Element 노드: HTML 태그들이 DOM 트리에서 Element 노드가 됩니다. 예를 들어, <html>, <head>, <body>, <h1>, <p>, <div>, <ul>, <li> 태그들이 각각 Element 노드로 변환됩니다.
  3. Text 노드: HTML 요소 내의 실제 텍스트는 Text 노드가 됩니다. 예를 들어, <h1> 태그 안의 "Welcome to My Website" 텍스트는 <h1> 요소의 자식 노드인 Text 노드가 됩니다.
  4. Attribute 노드: 태그의 속성들은 Attribute 노드로 표현됩니다. 이 예시에서는 속성이 표시되지 않았지만, 예를 들어 <div class="container">와 같이 클래스 속성이 있다면, 이는 <div>의 Attribute 노드가 됩니다.

DOM 트리는 이렇게 태그, 텍스트, 속성 등을 노드로 변환하여 문서의 계층적 구조를 나타냅니다. 이 구조를 통해 JavaScript와 같은 프로그래밍 언어가 HTML 문서의 각 부분에 접근하고, 조작할 수 있게 됩니다. 웹 페이지를 동적으로 만드는 데 필수적인 이 구조는 웹 개발의 중요한 기초를 이룹니다.

반응형