DOM에서 노드(Node), 객체(Object), 요소(Element)의 개념과 차이점
DOM의 구조를 이해하기 위해 노드, 객체, 요소의 개념과 이들 간의 관계를 자세히 설명드리겠습니다.
1. 기본 개념 비교
노드(Node)
- DOM 트리의 기본 구성 단위
- 모든 것(요소, 텍스트, 주석 등)이 노드로 표현됨
- Node 인터페이스를 구현한 객체
- 트리 구조에서 부모-자식 관계를 가짐
객체(Object)
- JavaScript에서 DOM을 조작하기 위한 프로그래밍 인터페이스
- DOM은 JavaScript 객체로 표현됨
- 계층 구조를 가진 객체들의 집합
요소(Element)
- HTML 태그에 해당하는 특수한 유형의 노드
- HTMLElement 인터페이스를 구현
- 속성(attributes)을 가질 수 있음
2. 상세 차이점
계층 구조
Node (최상위 인터페이스)
├── Document (문서 전체)
├── Element (HTML 요소)
│ ├── HTMLElement
│ │ ├── HTMLDivElement
│ │ ├── HTMLSpanElement
│ │ └── ...
├── Attr (속성)
├── Text (텍스트 내용)
└── Comment (주석)주요 차이 표
| 특징 | Node | Element | Object |
|---|---|---|---|
| 정의 | DOM 트리 기본 단위 | 특정 HTML 태그 | JS에서의 표현 |
| 인터페이스 | Node 인터페이스 | Element 인터페이스 | - |
| 포함 관계 | 모든 DOM 구성요소 | Node의 하위 타입 | Node/Element를 객체로 표현 |
| 예시 | 텍스트 노드, 주석 노드 | <div>, <p> |
document.createElement() 반환값 |
| 메서드 | appendChild(), removeChild() |
getAttribute(), setAttribute() |
모든 JS 객체 메서드 |
3. 실제 DOM 예제 분석
<!DOCTYPE html>
<html>
<body>
<!-- 주석 노드 -->
<div id="example">안녕하세요 <span>DOM!</span></div>
<script>
const div = document.querySelector('#example');
// 노드 관련 작업
console.log(div.nodeType); // 1 (ELEMENT_NODE)
console.log(div.firstChild.nodeType); // 3 (TEXT_NODE)
// 요소 관련 작업
console.log(div.tagName); // "DIV"
console.log(div.id); // "example"
// 객체로서의 특징
console.log(typeof div); // "object"
console.log(div instanceof HTMLElement); // true
</script>
</body>
</html>4. 구체적인 차이 예시
1. 노드 vs 요소 선택
// 요소 선택 (Element)
const element = document.getElementById('example');
// 노드 선택 (Node)
const nodeList = document.querySelectorAll('#example *'); // 모든 자식 노드2. 사용 가능한 속성/메서드 차이
const elem = document.createElement('div');
const text = document.createTextNode('안녕하세요');
// Element 전용
elem.setAttribute('id', 'new');
console.log(elem.tagName); // "DIV"
// Node 공통
console.log(elem.nodeName); // "DIV"
console.log(text.nodeName); // "#text"
elem.appendChild(text); // Node 메서드 사용3. 상속 관계 확인
const div = document.querySelector('div');
console.log(div instanceof Node); // true
console.log(div instanceof Element); // true
console.log(div instanceof HTMLDivElement); // true
console.log(div instanceof Object); // true5. 중요한 개념 정리
- "모든 Element는 Node이지만, 모든 Node가 Element는 아니다"
- 요소는 노드의 특수한 유형
- 텍스트, 주석 등은 요소가 아닌 노드
- 객체로서의 DOM
- 브라우저는 DOM을 JavaScript 객체로 변환
document객체가 전체 DOM 트리의 진입점
- 실용적 차이
- 요소: 주로 HTML 태그 조작 시 사용
- 노드: 더 넓은 범위의 DOM 조작 시 사용
- 객체: JavaScript에서 DOM을 다루는 방식
6. 개발자 도구에서 확인
크롬 개발자 도구 콘솔에서:
> $0 // 현재 선택된 요소
> $0.__proto__ // 프로토타입 체인 확인
> dir($0) // 사용 가능한 모든 속성/메서드 확인이 설명이 노드, 객체, 요소의 차이를 명확히 이해하는 데 도움이 되었기를 바랍니다!
'프로그래머로의 여정' 카테고리의 다른 글
| DOM 프로퍼티(Property)의 의미와 역할 (1) | 2025.06.09 |
|---|---|
| 이벤트 리스너(Event Listener) (0) | 2025.06.09 |
| DOM(Document Object Model) 메서드 (0) | 2025.06.08 |
| Socket과 Port (0) | 2025.05.28 |
| SQLyog vs MySQL Workbench (0) | 2025.05.28 |
