노드(Node)란?
HTML DOM에서 정보를 저장하는 계층적 단위이다.
노트 트리는 노드들의 집합으로 노드 간 관계를 나타낸다.
자바스크립트에선 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.
노드 간 관계
- 노드 트리의 모든 노드는 계층적 관계
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
노드 종류
- 문서 노드
- 요소 노드
- 주석 노드
- 속성 노드
- 텍스트 노드
문서 노드(document node)
- HTML 문서 전체를 나타내는 노드
요소 노드(element node)
- 모든 HTML 요소는 요소 노드
- 속성 노드를 가질 수 있는 유일한 노드
주석 노드(comment node)
- HTML 문서의 모든 주석은 주석 노드
속성 노드(attribute node)
- 모든 HTML 요소의 속성은 속성 노드
- 요소 노드에 관한 정보를 가짐
- 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음
텍스트 노드(text node)
- HTML 문서의 모든 텍스트는 텍스트 노드
노드의 값
- 노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근
- nodeName
- nodeValue
- nodeType
// HTML 문서의 모든 자식 노드 중에서 첫번째 노드의 이름 선택
document.childNodes[0].nodeName;
// 아이디가 "id"인 요소의 첫 번째 자식 노드의 노드 값 선택
document.getElementById("id").firstChild.nodeValue;
// 아이디가 "id"인 요소의 첫 번째 자식 노드의 타입 선택
document.getElementById("id").firstChild.nodeType;
'Web > Java Script' 카테고리의 다른 글
| [JS] 자바스크립트 내장 객체 (0) | 2022.04.22 |
|---|---|
| [JS] 자바스크립트 Hoisting (0) | 2022.04.22 |
| [JS] 자바스크립트 변수 정의 과정 (0) | 2022.04.22 |
| [JS] 이벤트와 이벤트 핸들러 (0) | 2022.04.14 |
| [JS] 문서 객체 모델 DOM 개념과 자바스크립트 (0) | 2022.04.14 |
댓글