HTMLCollection과 NodeList
자바스크립트로 DOM을 다룰 때, 웹 페이지 내에서 선택된 HTML 요소가 여러 개가 한꺼번에 반환되는 경우가 있습니다. 이때 반환되는 요소들의 집합을 DOM 컬렉션이라고 하며, DOM 컬렉션으로는 HTMLCollection과 NodeList가 있습니다.
이 두 컬렉션의 개념과 공통점 및 차이점을 비교합니다.
DOM 컬렉션이 두 개인 이유
자바스크립트로 DOM의 객체를 직접 가져와서 다룰 때 일반적으로 관련 함수를 통해 가져옵니다. 이때, DOM을 다루는 특정 함수 중에는 원하는 요소를 선택해서 가져오려면 HTML 문서에 해당 요소가 하나가 아닌 여러 개가 있을 수 있습니다.
예를 들어, HTML 문서에서 선택한 태그 이름의 요소를 가져오는 getElementsByTagName() 함수로 <div> 태그를 선택하면 이 태그가 문서에서 한 개만 존재할 수도 있지만 여러 개가 있을 수 있다는 것입니다.
이때, 자바스크립트는 요소를 지정해서 가져올 때 선택된 요소가 여러 개일 수 있는 함수의 반환 값은 이 요소들을 모아서 집합을 만든 형태의 객체로 만듭니다. 이러한 객체 형태를 일반적으로 'DOM 컬렉션'이라고 합니다.
자바스크립트에서는 이 DOM 컬렉션이 하나의 객체가 아니라 두 개의 종류로 나뉘어져 있습니다. HTMLCollection과 NodeList입니다.
왜 DOM 컬렉션은 두 개의 종류로 나뉘어져 있을까요? 이것은 웹의 발전과 함께 자바스크립트의 역사적인 배경으로 이해해야 합니다.
HTMLCollection의 탄생 배경 - 초창기 컬렉션
현대적인 웹 이전의 자바스크립트는 그 사용 용도와 기능이 매우 한정적이었고, 제약도 많았습니다. 이때에는 DOM의 구조가 단순했으며, 몇 개의 함수로 HTML 요소를 다룰 수 있었습니다.
이러한 수준에서 탄생한 컬렉션이 HTMLCollection입니다.
NodeList의 탄생 배경 - 현대적인 컬렉션
하지만 웹이 발달하면서 웹에서 자바스크립의 사용과 기능이 확대되면서 기존의 HTMLCollection만으로는 한계가 있는 컬렉션보다 더 많을 것들을 활용할 수 있는 DOM 컬렉션이 필요하게 되었는데 NodeList가 탄생한 이유입니다.
앞서 살펴본 것처럼, DOM 컬렉션은 역사적인 배경과 웹 기술의 발전 과정 속에서 HTMLCollection과 NodeList 두 가지로 나뉘게 되었습니다.
초창기부터 존재했던 HTMLCollection은 단순한 요소 목록을 실시간으로 관리하는 데 초점이 맞춰져 있었으며, 기능적으로 제한적이었습니다. 반면, NodeList는 더 복잡하고 다양한 노드 구조를 다룰 수 있도록 설계되었으며, 확장된 기능과 현대적인 표준을 바탕으로 웹 개발 전반에 걸쳐 폭넓게 활용되고 있습니다.
| 구분 | HTMLCollection |
NodeList |
|---|---|---|
| 활용 범위 | DOM의 요소만를 다루기 위해 | DOM의 요소뿐만 아니라 텍스트, 주석, 속성 등의 노드를 다루기 위해 |
| 요소 선택 기준 | 태그 이름, 클래스 이름 등 한정적 기준 | CSS 선택자 기반으로 유연한 선택 가능 |
| 사용되는 메서드 | getElementsByTagName(),
getElementsByClassName() |
querySelectorAll() |
위 표를 보면 알 수 있듯이, HTMLCollection은 태그 이름이나 클래스 이름처럼 단순한 기준으로 요소를 가져오는 데 사용되며, 쓰임새가 제한적입니다. 반면 NodeList는 CSS 선택자를 기반으로 더 다양한 방식으로 요소를 선택할 수 있기 때문에, 현대 웹 개발에서는 NodeList가 훨씬 더 유용하고 자주 사용됩니다.
HTMLCollection과 NodeList 객체 비교
그럼 기술적으로 좀 더 상세히 HTMLCollection과 NodeList에 대해 다음의 표로 비교해 보겠습니다.
| 특징 | HTMLCollection |
NodeList |
|---|---|---|
| 사용 목적 | DOM의 요소를 다루기 위해 | DOM의 요소뿐만 아니라
텍스트, 주석, 속성 등의 노드를 다루기 위해 |
| 객체 생성 | getElementsByTagName(),
getElementsByClassName(),
기타 여러 메서드의 반환 값 |
querySelectorAll(),
Node.childNodes의 반환 값 |
| DOM의 변경 사항을 실시간(또는 live)으로 반영 |
예 |
|
| 유사 배열 객체 | 예 | 예 |
스프레스 구문이나 Array.from()로 배열 변환 가능 |
예 | 예 |
for...of 문으로 순회 가능 |
예 | 예 |
for 문으로 순회 가능 |
예 | 예 |
forEach() 메서드로 순회 가능 |
아니오 | 예 |
length 속성으로 길이 가져올 수 있음 |
예 | 예 |
| 장점 | DOM의 변경 사항을
실시간(또는 live)으로 반영 (단, for 문 사용 시 주의해야 함) |
|
| 단점 | 클래스 이름, 태그 이름으로만 객체를 생성할 수 있기 때문에 원하는 요소를 쉽게 선택하지 못하는 불편함이 있음(가장 큰 단점임) |
|
HTMLCollection과 NodeList 사용 방법 및 예제
아래의 링크를 클릭해서 HTMLCollection과 NodeList 사용 방법 및 예제에 대해 자세히 확인할 수 있습니다.
브라우저 호환성
| 객체 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
HTMLCollection
|
1 | 12 | 1 | 1 |
NodeList
|
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
HTMLCollection
|
DOM Standard #interface-htmlcollection |
NodeList
|
HTMLCollection #interface-nodelist |