JavaScript DOM Collections
JavaScript DOM Collections: DOM 컬렉션의 이해와 활용
JavaScript DOM Collections는 DOM 요소들을 그룹으로 다루는 방법을 제공하며, HTML 문서 내에서 특정 요소를 선택하고 조작할 때 유용합니다. DOM 컬렉션은 다양한 메서드와 속성을 통해 요소의 집합을 쉽게 관리할 수 있도록 도와줍니다. 이 가이드는 DOM 컬렉션의 종류, 사용법, 그리고 일반적인 활용 예제를 설명합니다.
1. DOM 컬렉션이란?
DOM 컬렉션은 HTML 문서 내에서 선택된 여러 요소를 포함하는 객체입니다. 일반적으로 DOM 컬렉션은 NodeList 또는 HTMLCollection 형식으로 제공됩니다. 이 컬렉션은 자바스크립트를 사용하여 DOM 요소를 선택하고, 이러한 요소에 대한 작업을 쉽게 수행할 수 있도록 도와줍니다.
1.1. 주요 DOM 컬렉션 유형
- NodeList:
querySelectorAll()메서드나childNodes속성으로 생성되며, 노드의 목록을 포함합니다. - HTMLCollection:
getElementsByClassName()또는getElementsByTagName()메서드로 생성되며, HTML 요소의 목록을 포함합니다.
2. NodeList와 HTMLCollection의 차이
- NodeList:
querySelectorAll()메서드를 사용하여 생성됩니다.- 정적: DOM이 변경되어도 NodeList는 업데이트되지 않습니다.
- 다양한 유형의 노드(요소, 텍스트 등)를 포함할 수 있습니다.
- HTMLCollection:
getElementsByClassName()또는getElementsByTagName()메서드를 사용하여 생성됩니다.- 동적: DOM이 변경되면 HTMLCollection도 업데이트됩니다.
- 요소 노드만 포함합니다.
3. DOM 컬렉션 사용 예시
이제 DOM 컬렉션을 사용하여 실제로 요소를 선택하고 조작하는 방법에 대해 살펴보겠습니다.
3.1. NodeList 사용하기
NodeList는 querySelectorAll() 메서드를 사용하여 선택된 요소의 목록을 반환합니다.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const items = document.querySelectorAll('#myList li'); // <li> 요소를 선택
items.forEach((item) => {
console.log(item.textContent); // 각 <li> 요소의 텍스트 출력
});
</script>
- 이 코드에서는
<ul>내의 모든<li>요소를 선택하고, 각 요소의 텍스트를 출력합니다.
3.2. HTMLCollection 사용하기
HTMLCollection은 getElementsByClassName() 또는 getElementsByTagName() 메서드를
사용하여 선택된 요소의 목록을 반환합니다.
<div class="example">Div 1</div>
<div class="example">Div 2</div>
<div class="example">Div 3</div>
<script>
const divs = document.getElementsByClassName('example'); // 클래스를 가진 <div> 선택
console.log(divs.length); // 선택된 <div> 요소의 개수 출력
for (let i = 0; i < divs.length; i++) {
console.log(divs[i].textContent); // 각 <div> 요소의 텍스트 출력
}
</script>
- 이 코드에서는 클래스가
example인 모든<div>요소를 선택하고, 각 요소의 개수와 텍스트를 출력합니다.
4. DOM 컬렉션 수정
선택한 DOM 컬렉션의 요소를 추가하거나 삭제할 수 있습니다. 이를 통해 페이지의 콘텐츠를 동적으로 변경할 수 있습니다.
4.1. 새로운 요소 추가하기
NodeList 또는 HTMLCollection에 있는 요소를 반복하여 새로운 요소를 추가할 수 있습니다.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="addItem">Add Item</button>
<script>
const list = document.getElementById('myList');
const addItemButton = document.getElementById('addItem');
addItemButton.addEventListener('click', () => {
const newItem = document.createElement('li'); // 새로운 <li> 요소 생성
newItem.textContent = `Item ${list.children.length + 1}`; // 텍스트 설정
list.appendChild(newItem); // <ul>에 추가
});
</script>
4.2. 요소 삭제하기
선택한 컬렉션의 요소를 삭제할 수도 있습니다. 예를 들어, 마지막 요소를 삭제하는 방법은 다음과 같습니다.
<button id="removeItem">Remove Last Item</button>
<script>
const removeItemButton = document.getElementById('removeItem');
removeItemButton.addEventListener('click', () => {
const lastItem = list.lastElementChild; // 마지막 자식 요소 선택
if (lastItem) {
list.removeChild(lastItem); // 마지막 요소 삭제
}
});
</script>
- 이 코드에서는 버튼 클릭 시 리스트의 마지막 항목을 삭제합니다.
5. 동적 변화에 대한 반응
HTMLCollection은 동적이기 때문에, 요소가 추가되거나 삭제될 때마다 컬렉션의 내용이 자동으로 업데이트됩니다. NodeList는 정적이므로, DOM이 변경되어도 기존 NodeList에는 영향을 미치지 않습니다.
5.1. HTMLCollection의 동적 업데이트
<div class="dynamic">Item 1</div>
<div class="dynamic">Item 2</div>
<button id="addItem">Add Item</button>
<script>
const divs = document.getElementsByClassName('dynamic');
document.getElementById('addItem').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'dynamic';
newDiv.textContent = `Item ${divs.length + 1}`;
document.body.appendChild(newDiv); // 새로운 <div> 요소 추가
console.log(divs.length); // 동적으로 업데이트된 개수 출력
});
</script>
- 이 코드에서는 버튼 클릭 시 새로운
<div>요소가 추가되며,divs의 길이가 자동으로 업데이트됩니다.
요약
JavaScript DOM Collections는 HTML 문서 내에서 여러 요소를 그룹으로 다루는 방법을 제공합니다. 이를 통해 요소의 선택, 추가, 삭제 및 수정 작업을 효율적으로 수행할 수 있습니다.
- NodeList와 HTMLCollection: 두 가지 주요 DOM 컬렉션을 사용하여 요소를 선택하고 관리합니다.
- DOM 컬렉션 선택:
querySelectorAll(),getElementsByClassName(),getElementsByTagName()메서드를 사용하여 요소를 선택합니다. - DOM 컬렉션 수정: 선택한 요소를 추가하거나 삭제할 수 있습니다.
- 동적 변화 반응: HTMLCollection은 DOM 변화에 따라 자동으로 업데이트됩니다.
JavaScript DOM 컬렉션을 활용하여 동적이고 상호작용적인 웹 애플리케이션을 구축할 수 있습니다.