정의 및 사용 방법

HTMLCollection은
웹 페이지 내에서 선택된 HTML 요소만을 문서 내의 순서대로 모아둔 컬렉션(집합)입니다.

이 컬렉션은 DOM을 다룰 때 자주 쓰이며, 요소를 배열의 항목처럼 유사하게 다룰 수 있는 순회 가능한 유사 배열 객체입니다.

알아두세요!
HTML DOM을 다루는 DOM 컬렉션으로는 HTMLCollection과 NodeList가 있습니다.
HTMLCollection은 요소만의 집합이지만 NodeList는 생성 방식에 따라 요소뿐 아니라 텍스트나 주석 등 다양한 노드를 포함할 수 있습니다.
자세한 내용은 자바스크립트 HTMLCollection과 NodeList 비교를 참조하세요.

특징

  • HTMLCollection은 유사 배열 객체이면서, for...of 문으로 순회가 가능합니다. 다만, 명세서를 기준으로 이터러블 프로토콜(Iterable Protocol)을 따르는 객체는 아닙니다.
  • length 속성으로 유사 배열 객체인 HTMLCollection의 길이를 반환할 수 있습니다.
  • HTMLCollection은 DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.

HTMLCollection 객체를 반환하는 메서드

알아두세요!
이 두 메서드 이외에도 HTMLCollection 객체을 반환하는 메서드는 더 있습니다. 하지만, 이 두 메서드가 가장 대표적으로 많이 활용하는 메서드입니다.

기본 예제

HTMLCollection 객체를 반환하는 getElementsByTagName()과 getElementsByClassName()를 통해서 HTMLCollection 객체의 사용 방법과 특징에 대해 알아보겠습니다.

getElementsByTagName()

getElementsByTagName()은 문자열로 지정된 HTML 태그 이름과 일치하는 모든 요소를 HTMLCollection 객체로 반환합니다.

구문
JavaScript 
// HTML 문서 전체에서
document.getElementsByTagName(name)

// 특정 요소 내에서
element.getElementsByTagName(name)
사용 방법
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTMLCollection</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="tag-name.js"></script>
    </body>
</html>
tag-name.js 
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) { // length 속성 사용 가능
    console.log(liElements[i].textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 3 - 배열 객체로 변환해서 배열의 foreach() 메서드 적용 */

// 스프레스 구문을 사용해서 배열 객체로 변환
const arr = [...liElements];

arr.forEach(li => {
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

// Array.from() 메서드를 사용해서 배열 객체로 변환
const liElementsArray = Array.from(liElements);

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
for...of 문은 순회 가능한 이터러블(iterable) 객체를 순회하는 반복문입니다.
getElementsByTagName()로 반환된 HTMLCollection 객체는 유사 배열 객체이면서 순회 가능한 객체입니다.

코드 부연설명
for 문은 배열이나 유사 배열 객체의 숫자 인덱스(index)를 기반으로 요소에 접근하기 때문에, 인덱스와 length 속성만 있으면 순회가 가능합니다.
getElementsByTagName()로 반환된 HTMLCollection 객체는 유사 배열 객체이면서 length 속성이 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 배열의 메서드입니다. 코드 예제에서는 이 함수로 HTMLCollection를 배열 객체로 변환해서 접근할 수 있는 방법을 제시하고 있습니다.

코드 부연설명
스프레드 구문은 ... (점 세 개) 뒤에 해당하는 이터러블 객체(배열, 문자열, DOM 컬렉션 등)를 붙이는 형식의 구문으로 이터러블 객체(배열, 문자열, DOM 컬렉션 등)의 항목들을 간단하게 개별적으로 펼쳐서 나열할 수 있습니다. 이 구문을 사용하면 유사 배열을 배열로 쉽게 변환할 수 있습니다.

코드 부연설명
Array.from() 함수는 지정한 유사 배열 객체나 이터러블 객체를 새로운 배열로 변환하여 반환하는 함수입니다.

getElementsByClassName()

getElementsByClassName()은 지정된 HTML 클래스 속성의 이름과 일치하는 모든 요소를 선택하고 HTMLCollection 객체를 반환합니다.

구문
JavaScript 
// HTML 문서 전체에서
document.getElementsByClassName(names)

// 특정 요소 내에서
element.getElementsByClassName(names)
사용 방법
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTMLCollection</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script src="class-name.js"></script>
    </body>
</html>

코드 부연설명
HTML의 class 속성은 요소에 하나 이상의 클래스 이름을 지정하는 속성입니다.

class-name.js 
const liElements = document.getElementsByClassName("a");
console.log(liElements); // HTMLCollection(3) [li.a, li.a, li.a]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
// 출력: "김밥" "라면" "떡볶이"

/* 방법 3 - 배열 객체로 변환해서 배열의 foreach() 메서드 적용 */

// 스프레스 구문을 사용해서 배열 객체로 변환
const arr = [...liElements];

arr.forEach(li => {
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

// Array.from() 메서드를 사용해서 배열 객체로 변환
const liElementsArray = Array.from(liElements);

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
for...of 문은 순회 가능한 이터러블(iterable) 객체를 순회하는 반복문입니다.
getElementsByClassName()으로 반환된 HTMLCollection 객체는 유사 배열 객체이면서 순회 가능한 객체입니다.

코드 부연설명
for 문은 배열이나 유사 배열의 숫자 인덱스(index)를 기반으로 요소에 접근하기 때문에, 인덱스와 length 속성만 있으면 순회가 가능합니다.
getElementsByClassName()으로 반환된 HTMLCollection 객체는 유사 배열 객체이면서 length 속성이 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 배열의 메서드입니다. 코드 예제에서는 이 함수로 HTMLCollection를 배열 객체로 변환해서 접근할 수 있는 방법을 제시하고 있습니다.

코드 부연설명
스프레드 구문은 ... (점 세 개) 뒤에 해당하는 이터러블 객체(배열, 문자열, DOM 컬렉션 등)를 붙이는 형식의 구문으로 이터러블 객체(배열, 문자열, DOM 컬렉션 등)의 항목들을 간단하게 개별적으로 펼쳐서 나열할 수 있습니다. 이 구문을 사용하면 유사 배열을 배열로 쉽게 변환할 수 있습니다.

코드 부연설명
Array.from() 함수는 지정한 유사 배열 객체나 이터러블 객체를 새로운 배열로 변환하여 반환하는 함수입니다.

실시간(또는 live) DOM 객체

HTMLCollection 객체는 DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다. 이는 HTMLCollection 객체가 생성된 후에 DOM이 변경되면 HTMLCollection 객체도 변경된다는 것을 의미합니다. 다시 말해, HTMLCollection 객체는 웹 페이지의 요소를 현재 상태로 실시간으로 반영하는 객체입니다.

다음은 '새로운 메뉴 추가' 버튼을 클릭하면 <ul> 요소에 <li> 요소가 동적으로 추가될 때 document.getElementsByTagName("li")로 반환된 <li> 요소의 개수 즉, HTMLCollection 객체 항목의 개수가 실시간(또는 live)으로 반영되는 예제입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTMLCollection</title>
    </head>
    <body>
        <ul id="list">
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <p><li> 요소의 개수: <strong id="li-length-val">3</strong></p>
        <button type="button" id="addButton">새로운 메뉴 추가</button>
        <script src="live.js"></script>
    </body>
</html>
JavaScript - live.js 
// HTMLCollection 가져오기
const liElements = document.getElementsByTagName("li");

// 버튼 클릭 시 새로운 <li> 요소 추가
document.getElementById("addButton").addEventListener("click", () => {
    const newLi = document.createElement("li");
    newLi.textContent = "새로운 메뉴";

    // 새로운 <li> 요소를 <ul>에 추가
    document.getElementById("list").appendChild(newLi);

    // <li> 요소의 개수 실시간 확인
    const liElementsLength = liElements.length; // 이미 선언했던 liElements의 length가 실시간 반영됨
    document.getElementById("li-length-val").textContent = liElementsLength;
});

코드 부연설명
createElement() 함수는 새로운 HTML 요소를 생성해서 반환합니다.

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성의 값을 가진 요소 객체를 반환합니다.

코드 부연설명
appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

브라우저에서 실제 표시된 모습 버튼을 클릭해 보세요!

새로운 요소를 추가하면 HTMLCollection 객체도 실시간(또는 live)으로 반영하여 <li> 요소의 개수가 증가하는 것을 확인할 수 있습니다. 이는 DOM의 변경 사항을 실시간(또는 live)으로 반영지 않는 NodeList 객체와는 다른 차이점입니다.

명세서

HTMLCollection에 대한 명세서 사양
명세서 사양
HTMLCollection DOM Standard
#interface-htmlcollection

브라우저 호환성

HTMLCollection에 대한 브라우저 호환성
객체와 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
HTMLCollection 1 12 1 1
length 1 12 1 1

참고문헌

같이 보기