JavaScript - DOM Collections

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 JavaScript의 흥미로운 DOM Collections 세계로 뛰어들어 볼 거예요. 프로그래밍에 새로운 사람이라면 걱정 마세요 - 저는 수년 동안 수많은 학생들을 가르치면서 이 여정을 단계별로 안내해 왔습니다. 그러니 커피 한 잔 (또는 당신의 좋아하는 음료)을 챙겨서, 시작해 보세요!

The HTMLCollection Object

도서관에 가셔서 JavaScript에 관한 책들을 찾고 싶다면, 도서관 사서가 이 책들을 모두 담은 특별한 바구니를 주는 것을 상상해 보세요. 웹 개발의 세계에서 이 바구니는 HTMLCollection와 같아요 - JavaScript를 사용하여 작업할 수 있는 HTML 요소들의 모음입니다.

What is an HTMLCollection?

HTMLCollection은 웹 페이지上的 HTML 요소들의 모음을 나타내는 목록 같은 객체입니다. "실시간"이라는 점에서, 기본 문서가 변경될 때 자동으로 업데이트됩니다.

간단한 예제를 보겠습니다:

<div class="book">JavaScript Basics</div>
<div class="book">Advanced JavaScript</div>
<div class="book">DOM Manipulation</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // 출력: 3
</script>

이 예제에서 books는 클래스 이름이 "book"인 모든 요소들을 포함한 HTMLCollection입니다. length 속성은 컬렉션에 있는 요소의 수를告诉我们합니다.

Accessing Elements in an HTMLCollection

HTMLCollection의 요소에 접근하는 방법은 배열처럼 합니다:

console.log(books[0].innerText); // 출력: "JavaScript Basics"
console.log(books[1].innerText); // 출력: "Advanced JavaScript"
console.log(books[2].innerText); // 출력: "DOM Manipulation"

하지만 HTMLCollection은 정확히 배열이 아닙니다. 배열처럼 보이지만, 배열이 가지는 모든 메서드를 가지고 있지 않습니다.

Looping Through an HTMLCollection

HTMLCollection의 모든 요소를 반복하려면 for 루프를 사용할 수 있습니다:

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

또는, 더 현대적인 접근 방식으로, HTMLCollection을 배열로 변환하고 배열 메서드를 사용할 수 있습니다:

Array.from(books).forEach(book => {
console.log(book.innerText);
});

Collections of document Object and DOM Elements

HTMLCollection을 이해했으니, DOM 요소들의 컬렉션을 만드는 일반적인 방법들을 탐구해 보겠습니다.

document.getElementsByTagName()

이 메서드는 지정된 태그 이름을 가진 요소들의 HTMLCollection을 반환합니다.

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 출력: 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

이전에 보았지만, 좀 더 깊이 탐구해 보겠습니다:

<div class="fruit">Apple</div>
<div class="fruit">Banana</div>
<div class="fruit">Orange</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // 출력: 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

이 강력한 메서드는 CSS 선택자와 일치하는 모든 요소들의 NodeList (HTMLCollection과 유사하지만 다릅니다)를 반환합니다:

<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // 출력: 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

querySelectorAll()에 의해 반환된 NodeList은 HTMLCollection과 달리 실시간이 아니며, forEach 메서드를 내장하고 있습니다.

Comparison of Collection Methods

다음 표는 우리가 논의한 컬렉션 메서드를 요약합니다:

메서드	반환值	실시간?	사용 사례
getElementsByTagName()	HTMLCollection	예	특정 태그의 요소들을 필요할 때
getElementsByClassName()	HTMLCollection	예	특정 클래스를 가진 요소들을 필요할 때
querySelectorAll()	NodeList	아니요	CSS 선택자와 일치하는 요소들을 필요할 때

"실시간"은 DOM이 변경될 때 컬렉션이 자동으로 업데이트된다는 뜻입니다.

Conclusion

그렇게 우리는 DOM Collections의 땅을 거쳐, HTMLCollection에서 다양한 DOM 요소 모음 방법까지 여정을 마쳤어요. 이 도구들은 JavaScript를 사용하여 웹 페이지를 조작할 때 필수적이며, 요소를 선택하고 수정하는 데 용이하게 합니다.

이 개념들을 연습하면서, 당신은 DOM 조작에 더 익숙해질 것입니다. 악기를 연주하는 것처럼, 처음에는 어려울 수 있지만, 연습을 하면 곧 아름다운 웹 교향곡을 만들 수 있을 것입니다!

프로그래밍을 마스터하려면 연습과 호기심이 필요합니다. 이 메서드들을 실험해 보세요, 다양한 시나리오를 시도해 보세요, 그리고 가장 중요한 것은 코딩을 즐기세요!

다음 번에 다시 뵙겠습니다. 즐거운 코딩 되세요!

Credits: Image by storyset