DOM 컬렉션(Collections)

자바스크립트로 DOM을 다룰 때, HTML 문서 내의 여러 요소를 한꺼번에 처리해야 할 경우가 많습니다. 이때 반환되는 요소들의 집합을 DOM 컬렉션이라고 하며, DOM 컬렉션으로는 HTMLCollection과 NodeList가 있습니다.

DOM 컬렉션을 이해하려면 자바스크립트에서 컬렉션(collection)의 개념부터 파악하는 것이 중요합니다.

자바스크립트에서 컬렉션의 개념

자바스크립트에서 컬렉션(collection)은 여러 데이터를 그룹화하여 효율적으로 관리할 수 있는 구조로 여러 개의 값을 하나의 변수에 담아 관리할 수 있습니다.
대표적으로는 배열, 객체가 있으며, 주로 데이터 집합을 효율적으로 다루기 위한 도구로 사용됩니다.

다음은 가장 많이 사용되는 컬렉션인 배열과 객체의 예입니다.

JavaScript 
// 배열
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // "banana"

// 객체
const person = {name: "John", age: 30};
console.log(person.name); // "John"

위 두 컬렉션 예제를 보면 하나의 변수에 여러 데이터를 담고 있고, 효율적으로 다룰 수 있다는 공통점이 있습니다.

DOM 컬렉션

자바스크립트로 DOM을 다룰 때, HTML 문서 내의 여러 요소를 한꺼번에 처리해야 할 경우가 많습니다. 이때 반환되는 요소들의 집합을 'DOM 컬렉션'이라고 합니다.

DOM 컬렉션은 배열과 유사한 특징을 가지고 있습니다. 즉, 여러 개의 DOM 노드(HTML 요소 등)를 순서대로 저장하고, 인덱스를 통해 접근할 수 있습니다. 그러나 일반 배열과는 달리, DOM 컬렉션은 DOM 환경에 특화된 기능을 제공합니다.

왜 DOM 컬렉션이 필요할까요?

여러 요소들을 쉽게 다루기 위해서 필요합니다.

다수의 요소 선택

특정 태그 이름, 클래스, ID를 가진 모든 요소를 한 번에 선택하여 처리할 수 있습니다.

반복 처리

DOM 컬렉션은 순회 가능한 이터러블(iterable) 객체입니다.
예를 들어, for...of 문으로 컬렉션 내의 모든 요소를 순회하며 작업할 수 있습니다. 이를 통해 컬렉션에 포함된 요소들의 속성, 내용 등을 동적으로 변경할 수 있습니다.

DOM 컬렉션 종류

DOM 컬렉션으로는 HTMLCollection과 NodeList가 있습니다.

HTMLCollection

getElementsByTagName(), getElementsByClassName() 등을 통해 요소에 접근하면 반환되는 컬렉션입니다. 웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.

주로 DOM의 요소를 다루기 위해 사용됩니다.

사용 예시
HTML 
<ul>
    <li class="a">김밥</li>
    <li class="a">라면</li>
    <li class="a">떡볶이</li>
</ul>
JavaScript 
const liElements = document.getElementsByClassName("a");
console.log(liElements); // HTMLCollection(3) [li.a, li.a, li.a]

for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

자세한 내용은 자바스크립트 HTMLCollection 이해하기를 참고하세요!

NodeList

querySelectorAll() 등을 통해 요소에 접근하면 반환되는 컬렉션입니다. 웹 페이지의 HTML 문서 내에서 선택한 요소 객체뿐만 아니라 텍스트, 주석, 속성 등의 모든 노드를 문서 내 정렬된 순서대로 모아둔 집합입니다.

주로 DOM의 요소를 다루기 위해 사용되지만, 텍스트, 주석, 속성 등의 노드를 다루기 위해서도 사용됩니다.

사용 예시
HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
const liElements = document.querySelectorAll("li"); // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

for (const liElement of liElements) {
    console.log(liElement.textContent);
  }
/*
    "김밥"
    "라면"
    "떡볶이"
*/

자세한 내용은 자바스크립트 NodeList 이해하기 를 참고하세요!

HTMLCollection과 NodeList 차이점

둘 다 DOM 요소를 다룹니다. 그러나, 이 두 콜렉션은 약간 다른 특성을 가지고 있으며 사용 시 주의가 필요합니다.

자세한 내용은 자바스크립트 HTMLCollection과 NodeList 비교를 참고하세요!

브라우저 호환성

HTMLCollection과 NodeList의 브라우저 호환성
객체
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
HTMLCollection 1 12 1 1
NodeList 1 12 1 1

명세서

HTMLCollection과 NodeList의 명세서 사양
명세서 사양
HTMLCollection DOM Standard
#interface-htmlcollection
NodeList HTMLCollection
#interface-nodelist

참고문헌