[Javascript]HTMLCollection과 querySelector의 차이

HTMLCollection과 querySelector (또는 querySelectorAll)의 차이는 주로 반환 객체의 형태, 동작 방식, 사용 사례에 있습니다. 이를 아래에서 자세히 비교합니다.

---

1. 반환 객체의 차이

메서드	getElementsByClassName, getElementsByTagName, 등	querySelector, querySelectorAll
반환 객체	HTMLCollection	Element 또는 NodeList
실시간 업데이트	문서가 변경되면 자동 업데이트	문서가 변경되어도 업데이트되지 않음
다중 요소 선택	항상 여러 요소를 반환 (HTMLCollection)	querySelector: 첫 번째 요소만 반환 querySelectorAll: NodeList로 모든 요소 반환

예시

// HTML 구조
<div class="item">Item 1</div>
<div class="item">Item 2</div>

<script>
// HTMLCollection
let items = document.getElementsByClassName('item');
console.log(items); // HTMLCollection(2) [div.item, div.item]

// querySelectorAll
let itemsQuery = document.querySelectorAll('.item');
console.log(itemsQuery); // NodeList(2) [div.item, div.item]
</script>

 

---

2. 실시간 업데이트 여부

• HTMLCollection: 실시간으로 업데이트됩니다.
  • DOM이 변경되면 HTMLCollection도 자동으로 반영됩니다.
  • 예: 새로운 요소를 추가하거나 삭제할 때.
• NodeList (querySelectorAll): **정적(static)**입니다.
  • DOM 변경 이후에도 NodeList는 처음 선택된 상태를 유지합니다.
  • 하지만 NodeList는 live 상태로 작동할 수도 있는데, 이는 childNodes 같은 다른 메서드로 생성된 경우에만 해당됩니다.

실시간 업데이트 예제

let itemsHTML = document.getElementsByClassName('item');
let itemsQuery = document.querySelectorAll('.item');

// DOM 변경
let newDiv = document.createElement('div');
newDiv.className = 'item';
document.body.appendChild(newDiv);

console.log(itemsHTML.length); // HTMLCollection: 자동 업데이트 → 3
console.log(itemsQuery.length); // NodeList: 업데이트되지 않음 → 2

3. 배열 메서드 사용 가능 여부

• HTMLCollection: 배열 메서드 사용 불가
  • forEach, map, filter 등 배열 메서드를 직접 사용할 수 없습니다.
  • 배열로 변환해야 합니다: Array.from() 또는 [...collection].
• NodeList: 배열 메서드 일부 사용 가능
  • querySelectorAll로 반환된 NodeList는 **forEach**를 지원합니다.
  • 그러나 map, filter 등은 지원하지 않으므로 필요 시 배열로 변환해야 합니다.

배열 메서드 예제

let itemsHTML = document.getElementsByClassName('item');
let itemsQuery = document.querySelectorAll('.item');

// HTMLCollection → 배열 변환 후 메서드 사용
Array.from(itemsHTML).forEach(item => console.log(item.textContent));

// NodeList는 forEach 지원
itemsQuery.forEach(item => console.log(item.textContent));

---

4. 선택 방식

• HTMLCollection:
  • 요소를 태그 이름이나 클래스 이름으로만 선택합니다.
  • ID, 복잡한 CSS 선택자 등을 지원하지 않습니다.
  • 메서드: getElementsByTagName, getElementsByClassName.
• querySelector / querySelectorAll:
  • CSS 선택자를 사용하여 ID, 클래스, 태그, 속성 등을 포함한 복잡한 선택이 가능합니다.
  • 매우 유연하며 최신 개발에 더 적합합니다.

선택 방식 비교

// HTMLCollection
let itemsHTML = document.getElementsByClassName('item'); // 클래스 선택

// querySelector
let firstItem = document.querySelector('.item'); // 첫 번째 요소만
let itemsQuery = document.querySelectorAll('.item[data-active="true"]'); // 복잡한 선택자 지원

---

5. 사용 사례

HTMLCollection	querySelector / querySelectorAll
간단한 선택: 태그 이름, 클래스 이름만 필요	복잡한 CSS 선택자를 사용할 때 적합
실시간 DOM 변경 사항 추적이 필요한 경우	정적 NodeList가 필요하거나 최신 DOM 작업에 적합
과거 레거시 코드와 호환성이 필요할 때	최신 브라우저를 대상으로 더 현대적인 개발을 할 때

---

결론

• 현대적인 DOM 조작에서는 **querySelector 및 querySelectorAll**이 더 유연하고 직관적이므로 선호됩니다.
• HTMLCollection은 레거시 코드나 간단한 작업에서 여전히 사용할 수 있지만, 대부분의 경우 더 강력한 CSS 선택자를 제공하는 querySelectorAll을 사용하는 것이 더 적합합니다.