Bộ sưu tập JavaScript H TML DOM
Đối tượng HTMLCollection
Phương getElementsByTagName()
thức trả về một HTMLCollection
đối tượng.
Một HTMLCollection
đối tượng là một danh sách (tập hợp) các phần tử HTML giống như một mảng.
Đoạn mã sau chọn tất cả các <p>
phần tử trong một tài liệu:
Thí 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 một số chỉ mục.
Để truy cập phần tử <p> thứ hai, bạn có thể viết:
myCollection[1]
Lưu ý: Chỉ mục bắt đầu từ 0.
Độ dài bộ sưu tập HTML HTMLC
Thuộc length
tính xác định số phần tử trong HTMLCollection
:
Thí dụ
myCollection.length
Thuộc length
tính hữu ích khi bạn muốn lặp qua các phần tử trong một tập hợp:
Thí 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";
}
Bộ sưu tập HTMLC KHÔNG phải là một mảng!
Bộ sưu tập HTMLC có thể trông giống như một mảng, nhưng 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.