JavaScript의 숨겨진 보물: NodeList와 HTMLCollection 완벽 가이드

MicaelKnife·2024년 8월 28일

목록 보기

15/19

안녕하세요, 주니어 개발자 여러분! 🖐️ 오늘은 JavaScript에서 자주 마주치지만 종종 혼란을 주는 두 가지 특별한 객체, NodeList와 HTMLCollection에 대해 파헤쳐 보겠습니다. 이 두 객체는 마치 비밀 상자 같아서, 열어보면 놀라운 기능들이 숨겨져 있답니다! 😲

1. NodeList: DOM의 숨은 조력자 🌟

NodeList는 문서 객체 모델(DOM)에서 노드의 집합을 나타내는 객체입니다. 주로 querySelectorAll() 메서드를 통해 만나볼 수 있죠.

특징:

유사 배열 객체(Array-like object)입니다. 🧩
forEach() 메서드를 기본적으로 지원합니다. 👍
인덱스로 접근 가능하며, length 프로퍼티를 가집니다. 📏

const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // 문서 내 모든 <p> 요소의 개수

paragraphs.forEach(p => {
    console.log(p.textContent);
});

2. HTMLCollection: 실시간 업데이트의 마술사 🎭

HTMLCollection은 HTML 요소의 집합을 나타내는 객체로, 주로 getElementsByClassName(), getElementsByTagName() 등의 메서드로 얻을 수 있습니다.

특징:

유사 배열 객체입니다. 🧩
실시간으로 업데이트됩니다! (라이브 컬렉션) 🔄
forEach()를 직접 사용할 수 없습니다. 😢

const divs = document.getElementsByTagName('div');
console.log(divs.length); // 문서 내 모든 <div> 요소의 개수

// HTMLCollection에 forEach를 직접 사용할 수 없습니다!
// 아래 코드는 에러를 발생시킵니다.
// divs.forEach(div => console.log(div.id));

3. 유사 배열을 진짜 배열로: 변신의 비밀 🦋

NodeList와 HTMLCollection은 배열은 아니지만, 배열로 쉽게 변환할 수 있습니다. 이렇게 하면 배열의 모든 강력한 메서드를 사용할 수 있게 되죠!

// 방법 1: Array.from()
const divsArray = Array.from(divs);

// 방법 2: 전개 연산자(Spread Operator)
const divsArray2 = [...divs];

// 이제 배열 메서드를 자유롭게 사용할 수 있습니다!
divsArray.forEach(div => console.log(div.id));
const filteredDivs = divsArray.filter(div => div.classList.contains('highlight'));

4. NodeList vs HTMLCollection: 무엇을 선택할까? 🤔

특징	NodeList	HTMLCollection
실시간 업데이트	❌ (대부분의 경우)	✅
forEach 지원	✅	❌
항목 유형	모든 노드 타입	HTML 요소만

5. 주니어 개발자를 위한 팁 💡

일관성을 위해 변환하기: 항상 Array.from()이나 전개 연산자를 사용해 배열로 변환하는 습관을 들이세요. 이렇게 하면 모든 배열 메서드를 사용할 수 있어 코드의 일관성을 유지할 수 있습니다.
성능 고려하기: HTMLCollection은 실시간으로 업데이트되므로, 반복문에서 length를 매번 확인하는 것은 비효율적일 수 있습니다. 대신 길이를 변수에 저장하고 사용하세요.
메서드 선택에 주의하기: querySelectorAll()은 NodeList를, getElementsBy* 메서드들은 HTMLCollection을 반환한다는 점을 기억하세요.
브라우저 호환성 확인: 오래된 브라우저에서는 일부 기능이 지원되지 않을 수 있으므로, 항상 호환성을 체크하세요.