자바스크립트 HTMLCollection과 NodeList 비교

`HTMLCollection`과 `NodeList`

자바스크립트에서 HTMLCollection과 NodeList는 DOM API에서 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체입니다. 둘 다 DOM 요소를 다룹니다. 그러나, 이 두 객체는 약간 다른 특성을 가지고 있으며 사용 시 주의가 필요합니다.

HTMLCollection과 NodeList의 공통점과 차이점에 대해 알아보겠습니다.

`HTMLCollection`과 `NodeList` 객체 비교

HTMLCollection과 NodeList 객체 비교
특징	`HTMLCollection`	`NodeList`
사용 목적	DOM의 요소를 다루기 위해	DOM의 요소뿐만 아니라 텍스트, 주석, 속성 등의 노드를 다루기 위해
객체 생성	`getElementsByTagName()`, `getElementsByClassName()`, 기타 여러 메서드	`querySelectorAll()`, `Node.childNodes`
DOM의 변경 사항을 실시간(또는 live)으로 반영	예	`querySelectorAll()` 사용: 아니오 `Node.childNodes` 사용: 예
유사 배열 객체	예	예
스프레스 문법이나 `Array.from()`로 배열 변환 가능	예	예
`for...of` 문으로 순회 가능	예	예
`for` 문으로 순회 가능	예	예
`forEach()` 메서드로 순회 가능	아니오	예
`length` 속성으로 길이 가져올 수 있음	예	예
장점	DOM의 변경 사항을 실시간(또는 live)으로 반영 (단, `for` 문 사용 시 주의해야 함)	`querySelectorAll()` 메서드는 CSS 선택자를 인수로 사용하기 때문에 원하는 요소를 쉽게 다룰 수 있음(가장 큰 장점임) 유사 배열 객체이지만, 배열로 변환하지 않고 `forEach()` 메서드로 순회 가능하기 때문에 다루기 편리함
단점	클래스 이름, 태그 이름으로만 객체를 생성할 수 있기 때문에 원하는 요소를 쉽게 선택하지 못하는 불편함이 있음(가장 큰 단점임)	DOM의 변경 사항을 실시간(또는 live)으로 반영하는데 불편함이 있음(`Node.childNodes` 속성을 사용해야 하는데 이 속성은 다루기 불편함)

`HTMLCollection`과 `NodeList` 사용 방법 및 예제

아래의 링크 버튼을 클릭해서 HTMLCollection과 NodeList 사용 방법 및 예제에 대해 자세히 확인할 수 있습니다.

`HTMLCollection` vs `NodeList` 결론

DOM을 다루는데 있어서 NodeList 객체를 반환하는 querySelectorAll() 메서드는 CSS 선택자를 사용하여 요소를 선택하기 때문에 훨씬 더 편리하며, HTMLCollection보다 유용한 경우가 많습니다. 따라서 많은 상황에서 querySelectorAll()이 더 편리하고 권장되는 방법입니다.

HTMLCollection은 주로 오래된 코드나 특정한 상황에서 사용되곤 하지만, HTMLCollection은 현대적 DOM의 이전에 고안된 것으로 HTML 요소만 지닐 수 있었습니다. 더욱 유연하게 선택자를 다루기 위해서는 querySelectorAll()과 NodeList를 활용하는 것이 더 현대적이고 강력한 방법입니다. 이러한 이유로 현대적인 웹 개발에서는 NodeList와 querySelectorAll()을 더 많이 사용하게 됩니다.

브라우저 호환성

HTMLCollection과 NodeList의 브라우저 호환성
객체	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`HTMLCollection`	1	12	1	1
`NodeList`	1	12	1	1

명세서

HTMLCollection과 NodeList의 명세서 사양
명세서 사양
`HTMLCollection`	DOM Standard #interface-htmlcollection
`NodeList`	HTMLCollection #interface-nodelist

참고문헌

같이 보기