[자바스크립트] 노드(Node) 개요, 종류, 사용법

1) 노드(Node)란?

- HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다.

- HTML DOM은 이러한 노드들을 정의하고 그들 사이의 관계를 설명해주는 역할을 한다.

- HTML 문서의 정보는 노드트리(node tree)라고 불리는 구조에 저장된다.

- 노드트리는 노드들의 집합이며 노드간의 관계를 보여준다.

 

 

2) 노드(Node)의 종류

 

1. 문서노드(document node)

HTML 문서 전체를 나타내는 노드이다.

 

2. 요소 노드(element node)

모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드이다.

 

3. 속성 노드(attribute node)

모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있다.

 

4 텍스트 노드(text node)

모든 HTML 문서의 모든 텍스트는 텍스트 노드이다.

 

5. 주석 노드(comment node)

HTML 문서의 모든 주석은 주석 노드이다.

 

 

3) 노드(Node)간의 관계 종류

 

1. parntNode(부모 노드)

 

2. childNodes(자식 노드 리스트)

 

3. firstChild(첫번째 자식 노드)

 

4. lastChild(마지막 자식 노드)

 

5. nextSibling(다음 형제 노드)

 

6. previousSibling(이전 형제 노드)

 

 

 

4) 노드(Node)에 대한 정보

 

1. nodeName

노드 고유의 이름을 저장한다. (읽기전용 프로퍼티이다.)

 

2. nodeValue

노드의 값을 저장한다.

 

3. nodeType

노드 고유의 타입을 정수로 저장하고 있다. (읽기전용이다.)

-요소노드 : 1

- 속성노드 : 2

- 택스트노드 : 3

- 주석노드 : 8

-문서노드 : 9

 

 

5) 노드(Node) 추가 방법

 

1. appendChild( )

새로운 노드를 해당 노드의 자식 리스트 맨 마지막에 추가하기

 

2. insertBefore( )

새로운 노드를 특정 자식 노드 바로 앞에 추가하기

 

3. insertData( )

새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가하기

 

 

6) 노드 생성

 

1. createElement( )

새로운 요소 노드를 만들기

 

2. createAttribute( )

새로운 속성 노드를 만들기

 

3. createTextNode( )

새로운 텍스트 노드를 만들기

 

 

7) 노드 제거

 

removeChild( )

- 자식 노드 리스트에서 특정 자식 노드를 제거해준다.

- 성공적으로 노드가 제거되면 노드를 반환해준다.

- 노드가 제거될 때에는 제거되는 노드의 모든 자식들도 다같이 제거된다.

 

 

8) 노드 복제

 

1. cloneNode( )

기존의 존재하는 노드와 동일한 새로운 노드를 생성하고 반환해준다.

 

2. cloneNode(true)

복제되는 노드의 모든 속성과 자식노드도 같이 복제된다.

 

2. cloneNode(false)

속성 노드만 복제하고 자식 노드를 복제하지 않는다.