HTML의 요소와 노드, 그리고 요소 노드의 차이

HTML에서 **요소(Element)**와 **노드(Node)**는 서로 연관된 개념이지만, 약간 다른 의미를 가집니다. 이를 이해하려면 먼저 DOM(Document Object Model)을 알아야 합니다. DOM은 HTML 문서를 계층적 구조로 표현한 모델이며, 이 구조는 트리 형태를 띱니다.

1. 노드(Node)

노드는 DOM 트리의 구성 요소 중 하나입니다. HTML 문서의 모든 부분(요소, 속성, 텍스트, 주석 등)이 노드로 표현됩니다.

노드의 종류
1. 요소 노드(Element Node): HTML 태그로 이루어진 노드. 예: <div>, <p> 등.
2. 속성 노드(Attribute Node): 요소의 속성을 나타냄. 예: id="header".
3. 텍스트 노드(Text Node): 요소 안의 텍스트 내용을 나타냄. 예: <p>Hello</p>의 "Hello".
4. 주석 노드(Comment Node): 주석 내용. 예: .
모든 노드는 DOM 트리의 하나의 단위로 취급됩니다.

2. 요소(Element)

요소는 HTML 문서에서 시작 태그와 종료 태그, 그리고 그 안의 내용을 포함한 구조를 말합니다. 예를 들어:

<div id="example">Hello, world!</div>

위의 코드에서 <div id="example">는 하나의 요소입니다.

요소는 시작 태그와 종료 태그로 구성되며, 그 안에:
- 속성 (Attributes)
- 자식 요소
- 텍스트 등이 포함될 수 있습니다.

3. 요소 노드(Element Node)

요소 노드는 DOM 트리에서 요소를 나타내는 특정 종류의 노드입니다.

요소 노드는 HTML 태그를 기준으로 만들어지며, 그 자체로 속성 노드와 텍스트 노드를 포함할 수 있습니다.
예: <div id="example">Hello</div>의 <div>는 요소 노드입니다.

구체적인 차이점 정리

구분 설명 예시

요소(Element)	HTML 문서에서 태그와 그 내용 전체를 의미	<div id="example">Hello</div>
요소 노드(Element Node)	DOM 트리에서 요소를 나타내는 노드. 자식 노드(속성, 텍스트 등)를 포함할 수 있음	<div> 노드는 id="example" 속성과 "Hello" 텍스트를 자식으로 가짐
노드(Node)	DOM 트리의 모든 구성 요소. 요소, 속성, 텍스트, 주석 등 모든 유형 포함	<div>, id="example", "Hello", <!-- comment --> 모두 노드

예제 코드와 DOM 트리

HTML:

<div id="container">
  <p>Hello, <span>world</span>!</p>
</div>

DOM 트리:

Element Node: <div id="container">
  └── Attribute Node: id="container"
  └── Element Node: <p>
        ├── Text Node: "Hello, "
        ├── Element Node: <span>
              └── Text Node: "world"
        └── Text Node: "!"

요약하자면, 요소는 HTML 문서에서의 구조적 단위를 말하며, 요소 노드는 DOM 트리에서 그 요소를 나타내는 특정 유형의 노드입니다. 모든 요소 노드는 노드이지만, 모든 노드가 요소 노드는 아닙니다!

저작자표시 비영리 변경금지 (새창열림)

Beom's tech