[javascript] DOM의 구조와 계층 구조

12 Dec 2023

javascript

웹 페이지를 이루는 요소들은 Document Object Model (DOM) 구조 안에 계층적으로 구성됩니다. DOM은 웹 페이지의 구조와 내용을 표현하는 데 사용되는 계층적인 트리 구조입니다.

DOM의 기본 구조

DOM은 노드(node)로 구성되어 있습니다. 각각의 노드는 문서의 일부를 나타내며, 특정한 종류의 데이터를 포함하거나 단순히 다른 부분에 대한 참조를 제공합니다. 주요한 종류의 노드에는 다음과 같은 것들이 있습니다.

요소 노드(Element Node): HTML 요소들을 나타냅니다. 예를 들어, <p>나 <div>와 같은 HTML 요소들이 이에 해당됩니다.
텍스트 노드(Text Node): 요소 노드 내에 포함된 텍스트를 나타냅니다.
속성 노드(Attribute Node): HTML 요소의 속성을 나타냅니다.

여기에서 중요한 점은 모든 것이 노드로 구성된다는 것입니다.

// 예시 HTML 코드
/*
<div id="main">
  <p>이것은 <span>중요한</span> 정보입니다.</p>
</div>
*/

// 위 HTML 코드에 해당하는 DOM 트리
/*
- Document
  - Element (div, id="main")
    - Text: "이것은 "
    - Element (p)
      - Text: "중요한"
      - Element (span)
        - Text: " 정보입니다."
*/

계층 구조

DOM은 계층적인 구조를 가지고 있으며, 요소들은 부모-자식 관계를 형성합니다. 이 계층 구조는 웹 페이지의 구조를 반영합니다.

자식 요소들은 부모 요소의 하위에 위치하며, 같은 부모를 가지는 요소들은 형제 관계에 있습니다. DOM에서 한 요소의 위치를 식별하는데 사용되는 용어들은 다음과 같습니다.

부모 노드(Parent Node): 어떤 노드의 바로 위에 있는 노드.
자식 노드(Child Node): 어떤 노드의 바로 아래에 있는 노드.
형제 노드(Sibling Node): 동일한 부모를 가지며 같은 계층에 있는 노드.

// 위 HTML 코드에 해당하는 DOM을 기준으로 예시를 들어보면
const main = document.getElementById('main'); // 부모 노드
const paragraph = main.querySelector('p'); // 자식 노드
const span = main.querySelector('span'); // 형제 노드

이러한 계층 구조를 이해하면 JavaScript를 사용하여 DOM을 조작하거나 탐색하는 것이 용이해집니다.

DOM의 구조와 계층 구조에 대한 기본적인 이해는 웹 개발에서 매우 중요합니다. DOM을 다루는 방법을 이해하면 웹 페이지의 동적인 요소를 조작하고 변화시키는 것이 가능해집니다.

결론

DOM은 웹 페이지의 구조와 내용을 나타내는 중요한 모델입니다. 이 모델을 잘 이해하고 활용함으로써 웹 개발에서 더 나은 사용자 경험을 제공할 수 있습니다.

참고 문헌: