자바스크립트 HTML DOM NodeList

HTML DOM을 구성하는 Node들 중 선택된 여러 개의 노드를 모아 놓은 노드들의 집합입니다.

NodeList

• HTML document를 구성하는 node들 (element nodes, attribute nodes, text nodes)의 집합입니다.
• 자바스크립트의 Array이와 유사하지만, 동일하지는 않습니다.

참고자료

• https://developer.mozilla.org/en-US/docs/Web/API/NodeList
• https://www.w3schools.com/jsref/dom_obj_html_nodelist.asp

NodeList 주요 특징

1. Array이와 비슷한 점

예를 들어, NodeList 안에 있는 노드들을 index를 이용해 접근할 수 있습니다.

또한, length 속성을 이용해 NodeList 안에 있는 노드의 수를 구할 수 있습니다.

2. Array이와 차이점

NodeList는 Array이와 유사하지만, 동일하지는 않습니다.

예를 들어, NodeList의 경우 push(), pop(), or join() 같은 Array 메서드를 사용할 수 없습니다.

Array.from()을 이용하여 NodeList를 진짜 Array로 변환할 수 있습니다.

3. 반환값을 NodeList로 반환하는 메서드

예를 들어, 다음의 메서드들을 사용하면 그 결과값을 NodeList 형태로 반환합니다.

• querySelectorAll()
• getElementsByName()
• childNodes()

4. NodeList vs HTMLCollection

NodeList와 HTMLCollection은 거의 유사하지만 동일하지는 않습니다.

예를 들어, 주요 특징들을 비교하면 다음과 같습니다.

비교	NodeList	HTMLCollection
구성 요소	document node들의 모음	document element들의 모음
	element nodes, attribute nodes, text nodes	-
차이점	오직 index number를 통해 접근할 수 있음	엘리먼트 name, id, index number 등을 통해 접근 가능
반환하는 메서드 예	querySelectorAll()	getElementsByClassName() getElementsByTagName()

참고자료

• https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp
•  

NodeList 속성과 메서드

NodeList에 사용할 수 있는 프로퍼티와 메서드는 다음과 같습니다.

• forEach()
• item()
• entries()
• keys()
• values()
• length