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ẻ `
- `), 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
| Đặc điểm | HTMLCollection | NodeList |
| :— | :— | :— |
| Loại nút | Chỉ Element | Tất cả Node (Element, Text…) |
| Tính chất | Luôn luôn “Live” | Đa số là “Static” |
| Cách truy cập | Index, ID, Name | Chỉ Index |
| Duyệt (forEach) | Không hỗ trợ trực tiếp | Có hỗ trợ trực tiếp |
—
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! 🏁✨
Leave a comment