JavaScript Reference - Tập 18: HTMLCollection & NodeList - Quản lý danh sách phần tử

Table of contents

1. HTMLCollection là gì?

HTMLCollection là một danh sách chứa các phần tử HTML (Element nodes).

• Kết quả trả về từ: getElementsByTagName(), getElementsByClassName().
• Đặc tính “Live” (Sống): Nếu bạn thay đổi DOM (ví dụ thêm một thẻ <li>), thì HTMLCollection sẽ tự động cập nhật số lượng phần tử ngay lập tức mà không cần gọi lại lệnh.
• Truy cập: Có thể truy cập bằng chỉ số ([0]) hoặc bằng tên/ID (namedItem()).

2. NodeList là gì?

NodeList là một danh sách chứa các nút (Nodes). Nút ở đây có thể là phần tử HTML, nhưng cũng có thể là nút văn bản (Text node) hoặc nút bình luận (Comment node).

• Kết quả trả về từ: querySelectorAll(), thuộc tính childNodes.
• Đặc tính “Static” (Tĩnh): Hầu hết các NodeList là tĩnh. Có nghĩa là nếu DOM thay đổi sau khi bạn đã lấy NodeList, danh sách này sẽ không tự cập nhật (trừ trường hợp lấy từ childNodes).
• Truy cập: Chỉ có thể truy cập bằng chỉ số ([0]).

3. Bảng so sánh nhanh

4. Tại sao chúng không phải là mảng?

Cả hai đều được gọi là “Array-like objects”. Bạn có thể dùng vòng lặp for để duyệt chúng, nhưng bạn không thể dùng các phương thức mạnh mẽ của Mảng như .push(), .pop(), .map() hay .filter().

Mẹo: Nếu muốn dùng các hàm của mảng, hãy chuyển chúng về mảng thực thụ bằng Spread operator:

const collection = document.getElementsByClassName("item");
const array = [...collection]; // Chuyển thành mảng thực thụ
array.map(item => console.log(item));

Lời kết Tập 18

Đây là bài viết cuối cùng trong Series JavaScript Reference! Chúng ta đã đi qua một hành trình dài từ xử lý chuỗi, mảng, đối tượng cho đến việc làm chủ hoàn toàn các thành phần của trình duyệt và DOM.

Hành trình chinh phục JavaScript của anh Tuấn trên blog tuannda.dev chắc chắn đã có một bộ tài liệu tra cứu cực kỳ vững chắc. Chúc anh có những dự án tuyệt vời với những kiến thức này! 🏁✨