JavaScript
HTMLCollection, NodeList 비교
폴리프레임
2024. 11. 5. 21:22
반응형
HTMLCollection과 NodeList는 모두 DOM 요소의 목록을 나타내지만, 중요한 차이점이 몇 가지 있습니다.
| 특 성 | HTMLCollection | NodeList |
| 생성 메서드 | getElementsByTagname, getElementsByClassName, childen 등 |
querySelectorAll, childNodes |
| 동적갱신여부 | DOM 변화에 즉시 반영 | 기본적으로 DOM 변화에 반영되지 않음 |
| 노드 유형 | Element 노드만 포함 | 모든 노드(텍스트, 주석 등 포함 가능) |
| 반복 지원 | 배열 변환 후 forEach 메서드 지원 | forEach 메서스 지원 |
예제 1. HTMLCollection
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<button id="add-item">Add Item</button>
<script>
// HTMLCollection 가져오기
const items = document.getElementsByClassName('item');
console.log('초기 items 개수:', items.length); // 2 출력
// 새 요소 추가
document.getElementById('add-item').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'item';
newDiv.textContent = 'New Item';
document.body.appendChild(newDiv);
// 추가 후 items 개수
console.log('추가 후 items 개수:', items.length); // 버튼 클릭 시마다 늘어남
});
</script>
</body>
- items는 HTMLCollection이기 때문에 DOM이 변경될 때마다 자동으로 업데이트됩니다.
- 버튼을 클릭할 때마다 새로운 .item 요소가 추가되면, items.length가 즉시 증가합니다.
예제 2. NodeList
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<button id="add-item">Add Item</button>
<script>
// HTMLCollection 가져오기
const items = document.getElementsByClassName('item');
console.log('초기 items 개수:', items.length); // 2 출력
// 새 요소 추가
document.getElementById('add-item').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'item';
newDiv.textContent = 'New Item';
document.body.appendChild(newDiv);
// 추가 후 items 개수
console.log('추가 후 items 개수:', items.length); // 버튼 클릭 시마다 늘어남
});
</script>
</body>
- items는 NodeList이며, 기본적으로 정적입니다. DOM이 변경되어도 items는 자동으로 업데이트되지 않습니다.
- 따라서, 버튼을 클릭해 새로운 .item 요소를 추가해도 items.length는 계속 2로 유지됩니다.
반복 방식 차이
// NodeList는 forEach 지원
const itemsNodeList = document.querySelectorAll('.item');
itemsNodeList.forEach(item => console.log(item));
// HTMLCollection은 forEach 직접지원 안되고, Array.from으로 배열 변환 후 사용
const itemsHTMLCollection = document.getElementsByClassName('item');
Array.from(itemsHTMLCollection).forEach(item => console.log(item));