비교
| 구분 | NodeList[] | HTMLCollection[] |
| 생성 방법 예시 | document.querySelectorAll() | document.getElementsByClassName() document.getElementsByTagName() document.forms, document.images 등 |
| 라이브 컬렉션 여부 | ❌ 정적(Static) DOM이 변경되어도 반영되지 않음 |
✅ 동적(Live) DOM이 변경되면 실시간으로 반영됨 |
| 반복 가능 여부 | ✅ forEach 사용 가능 (ES6 기준) | ❌ 직접 forEach 사용 불가 → 배열로 변환해야 함 |
| 내용물 | 노드(Node)들 (요소 외에도 텍스트 노드 등 포함될 수 있음) | 요소(Element)만 포함 |
공통점
둘 다 유사 배열이기 때문에 Array.from()이나 spread 문법으로 배열로 만들어 사용하는 경우가 많다.
const arrFromNodeList = Array.from(nodeList); // NodeList를 배열로 변환
const arrFromHTMLCollection = [...htmlCollection]; // HTMLCollection을 배열로 변환
'JS' 카테고리의 다른 글
| mouseover/out vs mouseenter/leave (0) | 2025.04.17 |
|---|---|
| 문제로 알아보는 querySelector vs querySelectorAll (0) | 2025.04.16 |
| 함수 형태로 감싼다고 함수형 프로그래밍이 아니다 (0) | 2025.04.07 |
| const 변수 vs const 상수 (0) | 2025.03.04 |
| 0.1 + 0.2 !== 0.3 (+해결방법) (0) | 2025.03.04 |