자바스크립트 HTMLCollection 이해하기

`HTMLCollection` 개념

HTMLCollection은
웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 요소를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 요소를 쉽게 조작할 수 있게 하는 객체입니다.

HTMLCollection은 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
그리고, DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.

length 속성으로 유사 배열 객체인 HTMLCollection의 길이를 반환할 수 있습니다.

`HTMLCollection` 객체를 반환하는 메서드

getElementsByTagName()
getElementsByClassName()

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

`getElementsByTagName()`

문자열로 지정된 태그 이름과 일치하는 모든 요소를 선택하고 HTMLCollection 객체를 반환합니다.

자바스크립트 getElementsByTagName()

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>

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_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

`getElementsByClassName()`

지정된 클래스 이름과 일치하는 모든 요소를 선택하고 HTMLCollection 객체를 반환합니다.

자바스크립트 getElementsByClassName()

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_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

`HTMLCollection` 객체를 다루는 방법

위 두 예제를 살펴보면, HTMLCollection 객체를 다룰 때 공통적인 방법으로 다루고 있다는 것을 알 수 있습니다.
HTMLCollection 객체는 아래의 세 가지 방법으로 쉽게 다룰 수 있습니다.

for...of 문으로 순회하는 방법
for 문으로 순회하는 방법
유사 배열을 진짜 배열로 변환하여 forEach() 함수로 순회하는 방법

`HTMLCollection` 객체의 요소 개수를 다루는 속성

HTMLCollection.length 속성은
HTMLCollection 객체에 포함되어 있는 요소(컬렉션 항목)의 개수를 반환합니다.

자바스크립트 length 속성의 이해와 사용 방법

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>

JavaScript - tag-name.js

const liElements = document.getElementsByTagName("li");
console.log(liElements); // HTMLCollection(3) [li, li, li]

console.log(liElements.length); // 3

for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

`HTMLCollection` 객체의 특징

HTMLCollection 객체는 유사 배열 객체이면서 for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
HTMLCollection 객체는 DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.

유사 배열이면서 순회 가능한 이터러블(iterable) 객체

HTMLCollection 객체는 유사 배열 형태를 가집니다. HTMLCollection 객체는 배열과 유사하게 요소에 인덱스를 사용하여 접근할 수 있고, length 속성을 통해 요소의 수를 확인할 수 있습니다. 그러나 HTMLCollection 객체는 진짜 자바스크립트 배열이 아니라 유사 배열(iterable) 객체입니다.

HTMLCollection 객체는 배열과 유사하게 다룰 수 있지만, 진짜 배열처럼 배열 메서드(push(), pop(), forEach() 등)를 사용할 수는 없습니다. 그러나 ES6(ECMAScript 2015) 이후의 자바스크립트에서는 Array.from() 메서드나 스프레드 문법을 사용하여 HTMLCollection 객체를 진짜 배열로 변환할 수 있습니다. 이렇게 변환하면 배열 메서드를 사용할 수 있게 됩니다.

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>

JavaScript - tag-name.js

const liElements = document.getElementsByTagName("li");
console.log(liElements); // HTMLCollection(3) [li, li, li]


/* 유사 배열의 특징 */

// 속성을 통해 요소의 수를 확인할 수 있음
console.log(liElements.length); // 3

// 요소에 인덱스를 사용하여 접근할 수 있음
console.log(liElements[0].textContent); // "김밥"


/* 진짜 JavaScript 배열 아님 */

// forEach() 메서드 사용 시 에러 발생
liElements.array.forEach(element => { // Uncaught TypeError
    // some code here
});


/* 진짜 배열로 변환 */

// Array.from() 메서드
const liElementsArray = Array.from(liElements); // 배열로 변환

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

// 스프레드 문법 활용
const liElementsArray_1 = [...liElements]; // 배열로 변환
liElementsArray_1.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

자바스크립트 forEach() 함수

자바스크립트 스프레드 문법

실시간(또는 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;
});

document.getElementById()

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

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

새로운 요소를 추가하면 HTMLCollection 객체도 실시간(또는 live)으로 반영하여 <li> 요소의 개수가 증가하는 것을 확인할 수 있습니다.

이는 DOM의 변경 사항을 실시간(또는 live)으로 반영지 않는 NodeList 객체와는 다른 차이점입니다.

자바스크립트 NodeList 이해하기

명세서

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

브라우저 호환성

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

자바스크립트 HTMLCollection 이해하기

`HTMLCollection` 개념

`HTMLCollection` 객체를 반환하는 메서드

`getElementsByTagName()`

`getElementsByClassName()`

`HTMLCollection` 객체를 다루는 방법

`HTMLCollection` 객체의 요소 개수를 다루는 속성

`HTMLCollection` 객체의 특징

유사 배열이면서 순회 가능한 이터러블(iterable) 객체

실시간(또는 live) DOM 객체

명세서

브라우저 호환성

참고문헌

같이 보기

HTMLCollection 개념

HTMLCollection 객체를 반환하는 메서드

getElementsByTagName()

getElementsByClassName()

HTMLCollection 객체를 다루는 방법

HTMLCollection 객체의 요소 개수를 다루는 속성

HTMLCollection 객체의 특징

유사 배열이면서 순회 가능한 이터러블(iterable) 객체

실시간(또는 live) DOM 객체

명세서

브라우저 호환성

참고문헌

같이 보기

`HTMLCollection` 개념

`HTMLCollection` 객체를 반환하는 메서드

`getElementsByTagName()`

`getElementsByClassName()`

`HTMLCollection` 객체를 다루는 방법

`HTMLCollection` 객체의 요소 개수를 다루는 속성

`HTMLCollection` 객체의 특징