Tìm hiểu HTML DOM Collection trong JavaScript

Đối tượng HTMLCollection

Phương thức getElementsByTagName() trả về một đối tượng HTMLCollection. Một đối tượng HTMLCollection là một danh sách giống như mảng (collection) các phần tử HTML.

Đoạn mã sau chọn tất cả các phần tử <p> trong một tài liệu:

var x = document.getElementsByTagName(“p”);

Các phần tử trong collection có thể được truy cập bởi một số chỉ mục. Để truy cập phần tử <p> thứ hai bạn có thể viết:

y = x[1];

Lưu ý: chỉ mục bắt đầu từ 0.

Thuộc tính length của HTMLCollection

Thuộc tính length xác định số lượng các phần tử trong một HTMLCollection:

var myCollection = document.getElementsByTagName(“p”);
document.getElementById(“demo”).innerHTML = myCollection.length;

Giải thích ví dụ:

1. Tạo một collection của tất cả các phần tử <p>
2. Hiển thị độ dài của collection

Thuộc tính chiều dài length khi bạn muốn lặp lại các phần tử trong một Collection:

var myCollection = document.getElementsByTagName(“p”);
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = “red”;
}

Một HTMLCollection có thể trông giống như một mảng nhưng nó KHÔNG PHẢI là một mảng. Tuy nhiên, bạn không thể sử dụng các phương pháp mảng như valueOf(), pop(), push(), hoặc join() trên một HTMLCollection.