JavaScript - Tập hợp DOM

Xin chào các bạn học lập trình! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của Tập hợp DOM trong JavaScript. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ dẫn dắt bạn từng bước trong hành trình này, giống như tôi đã làm cho hàng trăm học viên trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc thức uống yêu thích của bạn), và chúng ta cùng bắt đầu!

Đối tượng HTMLCollection

Hãy tưởng tượng bạn đang ở thư viện, và bạn muốn tìm tất cả các sách về JavaScript. Thư thư viện sẽ đưa cho bạn một giỏ đặc biệt chứa tất cả những cuốn sách đó. Trong thế giới phát triển web, giỏ đó giống như một HTMLCollection - một tập hợp các phần tử HTML mà chúng ta có thể làm việc với JavaScript.

HTMLCollection là gì?

HTMLCollection là một đối tượng có dạng danh sách đại diện cho một tập hợp các phần tử HTML trên trang web. Nó là "sống", có nghĩa là nó tự động cập nhật khi tài liệu nền thay đổi.

Hãy xem một ví dụ đơn giản:

<div class="book">JavaScript Cơ bản</div>
<div class="book">JavaScript Nâng cao</div>
<div class="book">Thao tác DOM</div>

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

Trong ví dụ này, books là một HTMLCollection chứa tất cả các phần tử có class "book". Thuộc tính length cho chúng ta biết có bao nhiêu phần tử trong tập hợp.

Truy cập các phần tử trong HTMLCollection

Bạn có thể truy cập các phần tử trong HTMLCollection như bạn sẽ làm với một mảng:

console.log(books[0].innerText); // Xuất: "JavaScript Cơ bản"
console.log(books[1].innerText); // Xuất: "JavaScript Nâng cao"
console.log(books[2].innerText); // Xuất: "Thao tác DOM"

Tuy nhiên, hãy nhớ rằng HTMLCollection không phải là một mảng. Nó có dạng array-like, nhưng nó không có tất cả các phương thức của mảng.

Lặp qua các phần tử trong HTMLCollection

Để duyệt qua tất cả các phần tử trong HTMLCollection, bạn có thể sử dụng vòng lặp for:

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

Hoặc, nếu bạn thích một cách tiếp cận hiện đại hơn, bạn có thể chuyển đổi HTMLCollection thành một mảng và sử dụng các phương thức của mảng:

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

Tập hợp của đối tượng document và phần tử DOM

Bây giờ chúng ta đã hiểu HTMLCollection, hãy khám phá một số cách phổ biến để tạo tập hợp các phần tử DOM.

document.getElementsByTagName()

Phương thức này trả về một HTMLCollection của các phần tử có tên thẻ được chỉ định.

<p>Đoạn đầu tiên</p>
<p>Đoạn thứ hai</p>
<p>Đoạn thứ ba</p>

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

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

document.getElementsByClassName()

Chúng ta đã thấy điều này trước đây, nhưng hãy đi sâu hơn một chút:

<div class="fruit">Táo</div>
<div class="fruit">Chuối</div>
<div class="fruit">Cam</div>

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

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

document.querySelectorAll()

Phương thức mạnh mẽ này trả về một NodeList (giống như HTMLCollection) của tất cả các phần tử khớp với một bộ chọn CSS:

<ul>
<li class="item">Phần tử 1</li>
<li class="item">Phần tử 2</li>
<li class="item">Phần tử 3</li>
</ul>

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

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

Lưu ý rằng khác với HTMLCollection, NodeList trả về bởi querySelectorAll() không phải là sống và có phương thức forEach tích hợp sẵn.

So sánh các phương thức tập hợp

Dưới đây là bảng tóm tắt các phương thức tập hợp mà chúng ta đã thảo luận:

Phương thức	Trả về	Sống?	Trường hợp sử dụng
getElementsByTagName()	HTMLCollection	Có	Khi bạn cần các phần tử của một thẻ cụ thể
getElementsByClassName()	HTMLCollection	Có	Khi bạn cần các phần tử có một class cụ thể
querySelectorAll()	NodeList	Không	Khi bạn cần các phần tử khớp với một bộ chọn CSS

Lưu ý, "sống" có nghĩa là tập hợp tự động cập nhật khi DOM thay đổi.

Kết luận

Và đó là tất cả, các bạn học sinh yêu quý! Chúng ta đã cùng nhau hành trình qua vùng đất của Tập hợp DOM, từ HTMLCollection đến các phương thức thu thập phần tử DOM khác nhau. Những công cụ này là cơ bản để thao tác các trang web bằng JavaScript, cho phép bạn chọn và sửa đổi các phần tử một cách dễ dàng.

Khi bạn thực hành với những khái niệm này, bạn sẽ thấy mình ngày càng thoải mái hơn với việc thao tác DOM. Đó giống như học chơi một nhạc cụ - ban đầu có thể khó khăn, nhưng với sự thực hành, bạn sẽ tạo ra những bản giao hưởng web đẹp mắt trong thời gian ngắn!

Nhớ rằng, chìa khóa để thành thạo lập trình là sự thực hành và sự tò mò. Đừng ngại thử nghiệm với các phương thức này, thử nghiệm các tình huống khác nhau và quan trọng nhất, hãy vui vẻ khi lập trình!

Đến gặp lại các bạn, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset