[Javascript] NodeList 속성

[의미]

- 웹문서에서 추출한 노드 집합

 

1
HTMLCollection 객체와 거의 유사.
즉, 배열은 아니나 배열처럼 색인번호(index) 통해서 각 노드에 접근 가능.
색인번호는 0부터 시작.

2.
일부 (구형) 브라우저는 getElementsByClassName ()과 같은 메소드에 대해
HTMLCollection 대신 NodeList 객체 반환.

3.
모든 브라우저는 childNodes 속성에 대해 NodeList 객체 반환.

4.
대부분 브라우저는 querySelectorAll () 메소드에 대해 NodeList 객체 반환.

See the Pen Nodelist 테스트1 by Jihee (@ivy-love) on CodePen.

 

 

[NodeList 개수]

- length 속성 :  Node List 안의 노드 개수
- Node List 안 노드에 대해 반복문 적용 시 매우 유용. (2번째 예제)

 

예시1

See the Pen NodeList 테스트2 by Jihee (@ivy-love) on CodePen.

 

예시2

See the Pen NodeList 테스트3 by Jihee (@ivy-love) on CodePen.

 

 

 

 

[(HTMLCollection / NodeList) 비교]

 

[유사점]

1.
배열은 아니지만,
배열처럼 색인번호 통해 각 객체 안 요소(노드)에 대해 접근 가능.

2.
색인번호는 0부터 시작. (※ 반복문 가능)

3.
배열 아니기 때문에 배열 메서드 사용 불가.
(예) valueOf(), push() , pop() , join()

 

 

[차이점]
 
HTMLCollection 
① 이름, ID, 색인번호로 각 요소에 접근 가능.
② 속성노드와 텍스트노드 못 갖음.

NodeList
① 색인 번호로만 각 노드에 접근 가능.
② 속성노드와 텍스트노드 갖을 수 있음.