Bộ sưu tập DOM HTML
Bộ sưu tập HTML
HTMLCollection là một tập hợp (danh sách) các phần tử HTML giống như mảng.
Các phần tử trong bộ sưu tập có thể được truy cập theo chỉ mục (bắt đầu từ 0).
Thuộc tính length trả về số phần tử trong bộ sưu tập.
HTMLCollection so với NodeList
HTMLCollection gần giống như NodeList .
Xem mô tả bên dưới.
AI trả về một bộ sưu tập HTML?
Phương thức getElementsByTagName()
Thuộc tính và phương thức
Các thuộc tính và phương thức sau có thể được sử dụng trên HTMLCollection:
Name | Description |
---|---|
length | Returns the number of elements in an HTMLCollection |
item() | Returns the element at a specified index |
namedItem() | Returns the element with a specified id |
Ví dụ
Ví dụ
Nhận tất cả các đoạn văn:
const elements = document.getElementsByTagName("p");
Hãy tự mình thử »Ví dụ
Số phần tử <p> trong tài liệu là:
const elements = document.getElementsByTagName("p");
let numb = elements.length;
Hãy tự mình thử »Ví dụ
Lặp lại các phần tử trong HTMLCollection:
const elements = document.getElementsByTagName("*");
for (let i = 0; i < elements.length; i++) {
.. some code ..
}
Hãy tự mình thử »Không phải là một mảng
HTMLCollection không phải là một mảng!
HTMLCollection có thể trông giống như một mảng nhưng thực tế không phải vậy.
Bạn có thể lặp qua HTMLCollection và tham chiếu các phần tử của nó bằng một chỉ mục.
Nhưng bạn không thể sử dụng các phương thức Mảng như push(), pop() hoặc join() trên HTMLCollection.
Sự khác biệt giữa HTMLCollection và NodeList
NodeList và HTMLcollection rất giống nhau.
Cả hai đều là các bộ sưu tập (danh sách) dạng mảng gồm các nút (phần tử) được trích xuất từ một tài liệu. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.
Cả hai đều có thuộc tính độ dài trả về số phần tử trong danh sách (bộ sưu tập).
HTMLCollection là tập hợp các phần tử tài liệu .
NodeList là một tập hợp các nút tài liệu (nút phần tử, nút thuộc tính và nút văn bản).
Các mục HTMLCollection có thể được truy cập bằng tên, id hoặc số chỉ mục của chúng.
Các mục NodeList chỉ có thể được truy cập bằng số chỉ mục của chúng.
HTMLCollection luôn là một bộ sưu tập trực tiếp . Ví dụ: Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.
NodeList thường là một bộ sưu tập tĩnh . Ví dụ: Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong NodeList sẽ không thay đổi.
Các phương thức getElementsByClassName()
và getElementsByTagName()
trả về một HTMLCollection trực tiếp.
Phương thức querySelectorAll()
trả về một NodeList tĩnh.
Thuộc tính childNodes
trả về một NodeList trực tiếp.