DOM 노드와 프로퍼티의 차이

프로그래밍/javascript

DOM 노드와 프로퍼티의 차이

홍티비 2025. 1. 20. 14:40

728x90

SMALL

DOM 노드(DOM Node)와 DOM 프로퍼티(Property)는 둘 다 DOM(Document Object Model)의 일부지만, 역할과 성격이 다릅니다. 다음은 이 둘의 차이점과 관계를 정리한 내용입니다.

1. DOM 노드 (Node)

DOM 노드는 HTML 문서를 객체 모델로 표현한 트리 구조의 구성 요소입니다. HTML 문서의 각 요소, 텍스트, 속성 등이 각각 노드로 표현됩니다.

주요 특징:

구조적 요소: DOM 노드는 문서의 구조를 나타냅니다. 예를 들어, HTML 태그, 텍스트, 주석, 속성 등이 모두 노드로 표현됩니다.
종류: 여러 유형의 노드가 있습니다.
- Element 노드: HTML 요소를 나타냄 (예: <div>, <p>, <span> 등)
- Text 노드: 요소 안의 텍스트를 나타냄.
- Attribute 노드: 요소의 속성을 나타냄 (HTML5에서는 대부분 속성이 프로퍼티로 대체됨).
- Document 노드: DOM 트리의 루트 노드.

예제:

<div id="example">Hello</div>

DOM 구조:

Document
└── Element (div)
├── Attribute (id="example")
└── Text ("Hello")

div는 Element 노드.
id="example"는 Attribute 노드.
"Hello"는 Text 노드.

2. DOM 프로퍼티 (Property)

DOM 프로퍼티는 노드를 JavaScript에서 다루기 위한 속성입니다. DOM 노드와 연결된 객체에서 제공되며, 노드의 데이터를 동적으로 접근하거나 수정할 수 있는 수단입니다.

주요 특징:

JavaScript 객체의 속성: 노드와 연결된 객체의 데이터와 동작을 제어합니다.
동적 관리: 프로퍼티는 브라우저가 DOM을 파싱하면서 생성되며, JavaScript를 통해 읽거나 변경할 수 있습니다.
종류: DOM 프로퍼티는 노드의 유형에 따라 다릅니다.
- id, className, innerHTML, textContent, value 등은 Element 노드에서 자주 사용하는 프로퍼티.
- Text 노드에서는 nodeValue 같은 프로퍼티를 사용.

예제:

<div id="example">Hello</div>

const div = document.getElementById('example');

// DOM 노드의 프로퍼티 접근
console.log(div.id); // "example" (id 속성을 나타내는 프로퍼티)
console.log(div.textContent); // "Hello" (텍스트 내용을 나타내는 프로퍼티)

// 프로퍼티를 변경
div.textContent = "World!";
console.log(div.textContent); // "World!"

id와 textContent는 DOM 프로퍼티로, Element 노드의 상태를 반영하거나 변경할 수 있습니다.

3. 차이점 요약

구분	DOM 노드 (Node)	DOM 프로퍼티 (Property)
정의	문서의 구조적 요소 (트리의 구성 요소).	노드 객체에서 데이터를 다루기 위한 JavaScript 속성.
역할	HTML 문서를 트리 형태로 표현.	노드와 연결된 데이터를 동적으로 관리.
유형	Element, Text, Attribute, Document 등 다양한 노드 타입.	id, className, innerHTML, textContent 등의 속성.
생성 시점	HTML 문서를 파싱할 때 생성.	노드 객체가 생성될 때 자동으로 제공.
변경 방법	DOM API를 통해 트리 구조 수정.	JavaScript를 사용해 직접 접근하거나 수정.

4. DOM 노드와 프로퍼티의 관계

DOM 노드는 구조를 나타내고, DOM 프로퍼티는 그 구조를 JavaScript로 조작하기 위한 인터페이스입니다. 노드는 트리 형태로 연결되어 있고, 각 노드가 JavaScript 객체의 프로퍼티를 통해 속성과 상태를 표현합니다.

DOM 노드는 정적 구조를 나타냄.
DOM 프로퍼티는 노드와 관련된 동적 데이터를 조작할 수 있는 수단.

예제 관계:

<div id="myDiv">Hello</div>

const div = document.getElementById('myDiv');

// DOM 노드 자체
console.log(div.nodeType); // 1 (Element 노드)

// DOM 프로퍼티
console.log(div.id); // "myDiv" (id 속성의 값)
console.log(div.textContent); // "Hello" (텍스트 노드의 내용)

이처럼 DOM 노드와 프로퍼티는 서로 연결되어 있으면서도 각각의 역할을 합니다.

728x90

LIST