DOM 노드 탐색 프로퍼티의 비교 (childNodes vs. children)

문서 객체 모델(DOM, Document Object Model)을 구성하는 객체

- 모든 HTML 태그는 객체로 노드이다.

- 요소내의 문자, 공백, 개행 등의 특수 문자는 모두 텍스트 노드이다.

[주요 노드 타입]

- document node(문서 노드) : DOM의 진입점이 된다.

- element node(요소 노드) : HTML 태그에서 만들어 진다. DOM 트리를 구성한다.

- text node(텍스트 노드) : 텍스트를 포함하는 노드이다.

- comment node(주석 노드) : 주석 노드로, 화면에 보이지는 않으나 주석 노드도 DOM으로부터 정보를 읽을 수 있다.

이러한 노드는 프로퍼티로 탐색하거나 수정할 수 있다. 그 중 주요 탐색 프로퍼티를 비교해보자

구분	프로퍼티	탐색 대상	주요 차이점
모든 노드에 적용 가능	parentNode	부모 노드에 대한 정보	모든 종류의 노드를 참조 - 텍스트 노드, 요소 노드, 주석 노드까지 참조함
	childNodes	모든 자식 노드, 컬랙션으로 반환
	firstChild	첫번째 자식 노드
	lastChild	마지막 자식 노드
	previousSibling	이전 형제 노드에 대한 정보
	nextSibling	다음 형제 노드에 대한 정보
요소 노드에만 적용 가능	parentElement	부모 요소 노드	요소 노드만 참조함
	children	모든 자식 요소 노드, 컬랙션으로 반환
	firstElementChild	첫번째 자식 요소 노드
	lastElementChild	마지막 자식 요소 노드
	previousElementSibling	이전 형제 요소 노드
	nextElementSibling	다음 형제 요소 노드

* 주의할 점

1) 자식 노드와 후손 노드

- 자식 노드(child node, children) : 바로 아래의 자식 노드이다. 부모 요소와 중첩 관계를 이룬다.

- 후손 노드(descendants) : 중첩 관계에 있는 모든 요소로 자식 노드, 자식 노드의 모든 자식 노드 등이 모두 포함된다.

2) DOM 컬랙션

- 배열 같아 보이지만, 배열이 아닌 이터러블이다.

- 따라서, for...of를 사용할 수 있으나, 배열 메서드를 사용할 수는 없다.

- 배열 메서드를 사용하고 싶다면 Array.from을 적용해서 사용할 수 있다.

3) 모든 노드에 적용 가능한 경우,

- 텍스트 노드, 주석 노드등도 포함하여 탐색한다.

- 이를 이용하여, 부모 요소 탐색시 document 를 제외하고 탐색할 수도 있다.

- document는 요소 노드가 아니므로, parentNode로 접근시 접근가능하나, parentElement로 접근시 접근할 수 없다.

References...