Bộ sưu tập DOM TML JavaScript H
Đối tượng HTMLCollection
Phương thức getElementsByTagName()
trả về một đối tượng HTMLCollection
.
Đối tượng HTMLCollection
là một danh sách (bộ sưu tập) các phần tử HTML giống như mảng.
Đoạn mã sau chọn tất cả các phần tử <p>
trong tài liệu:
Ví dụ
const myCollection = document.getElementsByTagName("p");
Các phần tử trong bộ sưu tập có thể được truy cập bằng số chỉ mục.
Để truy cập phần tử <p> thứ hai, bạn có thể viết:
myCollection[1]
Hãy tự mình thử »Lưu ý: Chỉ số bắt đầu từ 0.
Độ dài bộ sưu tập HTML HTML
Thuộc tính length
xác định số phần tử trong HTMLCollection
:
Thuộc tính length
rất hữu ích khi bạn muốn lặp qua các phần tử trong bộ sưu tập:
Ví dụ
Thay đổi màu văn bản của tất cả các phần tử <p>:
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
Hãy tự mình thử » 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 danh sách và tham chiếu đến các phần tử bằng một số (giống như một mảng).
Tuy nhiên, bạn không thể sử dụng các phương thức mảng như valueOf(), pop(), push() hoặc join() trên HTMLCollection.