HTMLCollection과 NodeList
자바스크립트에서 HTMLCollection과 NodeList는 DOM API에서 여러 개의 결과값을 반환하기 위한 DOM 컬렉션입니다.
둘 다 DOM 요소를 다룹니다. 그러나, 이 두 객체는 약간 다른 특성을 가지고 있으며 사용 시 주의가 필요합니다.
HTMLCollection과 NodeList의 공통점과 차이점에 대해 알아보겠습니다.
HTMLCollection과 NodeList 객체 비교
| 특징 | HTMLCollection |
NodeList |
|---|---|---|
| 사용 목적 | DOM의 요소를 다루기 위해 | DOM의 요소뿐만 아니라
텍스트, 주석, 속성 등의 노드를 다루기 위해 |
| 객체 생성 | getElementsByTagName(),
getElementsByClassName(),
기타 여러 메서드의 반환 값 |
querySelectorAll(),
Node.childNodes의 반환 값 |
| DOM의 변경 사항을 실시간(또는 live)으로 반영 |
예 |
|
| 유사 배열 객체 | 예 | 예 |
스프레스 문법이나 Array.from()로 배열 변환 가능 |
예 | 예 |
for...of 문으로 순회 가능 |
예 | 예 |
for 문으로 순회 가능 |
예 | 예 |
forEach() 메서드로 순회 가능 |
아니오 | 예 |
length 속성으로 길이 가져올 수 있음 |
예 | 예 |
| 장점 | DOM의 변경 사항을
실시간(또는 live)으로 반영 (단, for 문 사용 시 주의해야 함) |
|
| 단점 | 클래스 이름, 태그 이름으로만 객체를 생성할 수 있기 때문에 원하는 요소를 쉽게 선택하지 못하는 불편함이 있음(가장 큰 단점임) | DOM의 변경 사항을
실시간(또는 live)으로 반영하는데 불편함이 있음( Node.childNodes 속성을 사용해야 하는데 이 속성은 다루기 불편함) |
HTMLCollection과 NodeList 사용 방법 및 예제
아래의 링크 버튼을 클릭해서 HTMLCollection과 NodeList 사용 방법 및 예제에 대해 자세히 확인할 수 있습니다.
HTMLCollection vs. NodeList 결론
DOM을 다루는데 있어서 NodeList 객체를 반환하는 querySelectorAll() 메서드는 CSS 선택자를 사용하여 요소를 선택하기 때문에 훨씬 더 편리하며, HTMLCollection을 반환하는 getElementsByTagName(),
getElementsByClassName()보다 유용한 경우가 많습니다. 따라서 많은 상황에서 querySelectorAll()이 더 편리하고 권장되는 방법입니다.
HTMLCollection은 주로 오래된 코드나 특정한 상황에서 사용되곤 하지만, HTMLCollection은 현대적 DOM의 이전에 고안된 것으로 HTML 요소만 지닐 수 있었습니다. 더욱 유연하게 선택자를 다루기 위해서는 NodeList인 querySelectorAll()을 활용하는 것이 더 현대적이고 강력한 방법입니다. 이러한 이유로 현대적인 웹 개발에서는 NodeList인 querySelectorAll()을 더 많이 사용하게 됩니다.
브라우저 호환성
| 객체 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
HTMLCollection
|
1 | 12 | 1 | 1 |
NodeList
|
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
HTMLCollection
|
DOM Standard #interface-htmlcollection |
NodeList
|
HTMLCollection #interface-nodelist |