DOM 노드 종류 - 요소 노드, 텍스트 노드, 속성 노드의 관계

요소 노드란?

HTML 문서 개체 모델(DOM)에서 요소 노드는 웹 페이지 내의 개별 HTML 요소를 나타냅니다. HTML 요소는 <div>, <p>, <h1>, <a> 등과 같은 태그로 정의됩니다. 이러한 각 요소는 DOM 트리 구조에서 요소 노드로 표시됩니다.

DOM 트리는 요소가 부모-자식 관계로 구성되는 HTML 구조의 계층적 표현입니다. 예를 들어 다음 HTML 코드를 살펴봅시다.

<div id="container">
  <h1>Welcome to my website!</h1>
  <p>This is a paragraph.</p>
</div>

이 경우 <div> 요소는 부모 노드이고 <h1> 및 <p> 요소는 자식 노드입니다. 이러한 각 요소는 DOM 내의 요소 노드입니다.

DOM의 요소 노드는 개발자가 HTML 요소와 상호 작용하고 조작할 수 있도록 하는 광범위한 속성 및 메서드를 제공합니다. 요소 노드의 속성을 사용하여 id, class, src 등과 같은 요소의 속성에 접근하고 수정할 수 있습니다. 예를 들어 위의 예에서 <div> 요소의 id 속성을 변경하려면 다음과 같이 Javascript를 사용할 수 있습니다.

var divElement = document.getElementById('container');
divElement.id = 'new-container';

마찬가지로 innerHTML, textContent 또는 innerText와 같은 속성을 사용하여 요소의 콘텐츠를 조작할 수 있습니다. 이러한 속성을 사용하면 HTML 콘텐츠 또는 요소의 텍스트 콘텐츠를 검색하거나 수정할 수 있습니다.

속성 외에도 요소 노드는 요소와 상호 작용하는 메서드도 제공합니다. classList.add(), classList.remove() 또는 classList.toggle()과 같은 메서드를 사용하여 CSS 클래스를 동적으로 추가하거나 제거할 수 있습니다. 클릭, 마우스 이동 또는 키보드 이벤트와 같은 사용자 상호 작용을 처리하기 위해 'addEventListener()' 메서드를 사용하여 요소에 이벤트 리스너를 연결할 수 있습니다.

전반적으로 HTML DOM의 요소 노드는 웹 페이지 내에서 HTML 요소와 상호 작용하는 백본을 형성합니다. 이를 통해 개발자는 JavaScript와 같은 프로그래밍 언어를 사용하여 HTML 요소의 구조, 속성, 콘텐츠 및 동작에 액세스, 조작 및 수정할 수 있습니다. 개발자는 Element 노드의 기능을 활용하여 사용자 작업에 응답하고 풍부한 사용자 경험을 제공하는 동적인 대화형 웹 페이지를 만들 수 있습니다. 또한 요소 노드는 텍스트 노드와 속성 노드를 포함할 수 있습니다.

그 외의 여러 노드들

HTML DOM에는 요소(Element) 노드 외에도 다양한 종류의 노드가 있습니다. 이러한 노드에는 Text 노드, Comment 노드, Attribute 노드, Document 노드 등이 있습니다.

텍스트노드

텍스트 노드는 HTML 요소 내의 실제 텍스트 콘텐츠를 나타냅니다. 예를 들어 <p>Hello, world!</p>와 같은 단락 <p> 요소가 있는 경우 "Hello, world!" 텍스트 자체는 Text 노드로 표시됩니다. 텍스트 노드는 부모 요소 노드의 자식 노드이며 nodeValue와 같은 속성이나 textContent와 같은 메서드를 사용하여 접근하고 수정할 수 있습니다.

주석 노드

주석 노드는 이름에서 알 수 있듯이 HTML 마크업 내의 주석을 나타냅니다. 코드에 설명적 또는 유익한 주석을 추가하는 데 사용되며 웹 페이지에 렌더링되지 않습니다. 주석 노드는 요소 노드의 형제이며 nodeType과 같은 속성과 getElementsByTagName()과 같은 메서드를 사용하여 액세스할 수 있습니다.

속성 노드

속성 노드는 HTML 요소의 속성을 나타냅니다. id, class 또는 src와 같은 각 속성은 해당 요소 노드와 연결된 개별 속성 노드로 간주됩니다. 속성 노드는 getAttribute()와 같은 메소드를 통해 액세스할 수 있으며 setAttribute()와 같은 메소드를 사용하여 수정할 수 있습니다.

문서 노드

문서 노드는 전체 HTML 문서를 나타냅니다. DOM 트리의 루트 노드이며 그 안에 다른 모든 노드를 포함합니다. 문서 노드는 'getElementById()' 또는 'getElementsByTagName()'과 같은 메서드를 제공하여 문서 내의 요소에 액세스하고 조작합니다.