JavaScript - DOM 노드 목록
DOM 노드 목록에 대한 소개
안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 JavaScript DOM 노드 목록의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 저는 여러분의 친절한 가이드가 되겠습니다. 우리는 단계별로 진행하겠습니다. 이 튜토리얼의 끝을 맺을 때, 여러분은 프로처럼 웹 페이지를 조작할 수 있을 것입니다!
DOM 노드 목록이란?
들어가기 전에 기본 개념부터 시작해보겠습니다. 웹 페이지를 가족 트리로 상상해보세요. DOM(문서 객체 모델)은 웹 페이지의 가족 트리와 같습니다. 페이지에 있는 각 요소 - 문단, 버튼, 이미지 등이 이 가족의 일원이거나, 기술적인 용어로는 "노드"입니다.
노드 목록은 이러한 노드들의 모음입니다. 파티에 초대된 손님 명단과 같이, 각 손님은 웹 페이지의 요소입니다.
예제 1: 노드 목록 가져오기
간단한 예제를 보겠습니다:
<div>
<p>문단 1</p>
<p>문단 2</p>
<p>문단 3</p>
</div>
<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>이 예제에서 querySelectorAll('p')은 모든 <p> 요소를 포함한 노드 목록을 반환합니다. 브라우저 콘솔에서 이를 실행하면 다음과 같은 것을 볼 수 있습니다:
NodeList(3) [p, p, p]이는 우리가 3개의 문단 요소를 포함한 노드 목록을 가지고 있음을 의미합니다.
노드 목록과의 작업
이제 우리는 노드 목록을 가지고 있으니, 무엇을 할 수 있는지 살펴보겠습니다!
예제 2: 노드 목록 반복
let paragraphs = document.querySelectorAll('p');
paragraphs.forEach((paragraph, index) => {
console.log(`문단 ${index + 1}: ${paragraph.textContent}`);
});이 코드는 다음과 같은 출력을 보여줍니다:
문단 1: 문단 1
문단 2: 문단 2
문단 3: 문단 3여기서 우리는 forEach 메서드를 사용하여 노드 목록의 각 문단을 반복하고 있습니다. 파티 손님 명단을 돌아다니며 각 손님을 인사하는 것과 같습니다!
동적 vs 정적 노드 목록의 마법
이제 흥미로운 부분으로 넘어가겠습니다. 노드 목록은 동적이거나 정적일 수 있습니다.
동적 노드 목록은 마법의 손님 명단처럼, 사람들이 도착하거나 떠날 때 자동으로 업데이트됩니다. 반면, 정적 노드 목록은 특정 순간의 손님 명단의 스냅샷과 같아서, 새로운 손님들이 도착해도 변하지 않습니다.
예제 3: 동적 노드 목록
<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>
<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // 출력: 2
let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);
console.log(guests.length); // 출력: 3
</script>이 예제에서 getElementsByTagName은 동적 노드 목록을 반환합니다. Charlie를 목록에 추가하면, 우리의 guests 노드 목록이 자동으로 업데이트됩니다!
예제 4: 정적 노드 목록
<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>
<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // 출력: 2
let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);
console.log(guests.length); // 여전히 출력: 2
</script>여기서 querySelectorAll은 정적 노드 목록을 반환합니다. Charlie를 추가해도, 우리의 guests 노드 목록은 변하지 않습니다. 마치 손님 명단의 사진을 찍고 그 사진이 새로운 손님들이 도착해도 업데이트되지 않는 것과 같습니다.
HTMLCollection과 NodeList의 차이
이제 DOM 가족의 두 가지 사촌에 대해 이야기해보겠습니다: HTMLCollection과 NodeList. 그들은 비슷하지만, 각자 독특한 특성을 가지고 있습니다.
HTMLCollection
HTMLCollection은 항상 동적입니다. 손님 명단이 항상 업데이트되는 마법의 명단과 같습니다.
let divs = document.getElementsByTagName('div'); // HTMLCollection 반환NodeList
NodeList는 생성 방식에 따라 동적이거나 정적일 수 있습니다.
let paragraphs = document.querySelectorAll('p'); // 정적 NodeList 반환
let childNodes = document.body.childNodes; // 동적 NodeList 반환그들의 차이를 요약한 표입니다:
| 기능 | HTMLCollection | NodeList |
|---|---|---|
| 동적/정적 | 항상 동적 | 동적 또는 정적 |
| 내용 | 요소 노드만 | 모든 노드 타입 포함 |
| 항목 접근 | 이름, id, 인덱스로 | 인덱스로만 |
| forEach 메서드 | 사용 불가 | 사용 가능 |
결론
이제 여러분은 DOM 노드 목록의 땅을 거쳐, 기본 개념에서 동적과 정적 목록의 미묘한 차이에 이르기까지 여행을 마쳤습니다. 연습이 완벽을 만듭니다. 이 예제를 시도해보고, 그것을 실험해보세요. 곧 경험 많은 개발자처럼 웹 페이지를 조작할 수 있을 것입니다!
우리가 헤어지기 전, 작은 웹 개발자 장난을 하나 드릴게요: 왜 JavaScript 개발자가 안경을 썼을까요? 그는 C#을 볼 수 없었기 때문입니다! (이해하셨나요? C 샤프? 그래도 나가겠습니다...:]
Keep coding, keep learning, and most importantly, keep having fun with JavaScript!
Credits: Image by storyset