Tài liệu HTML DOM getElementsByClassName()
Ví dụ
Lấy tất cả các phần tử có class="example":
const collection = document.getElementsByClassName("example");
Hãy tự mình thử »Nhận tất cả các phần tử có cả hai lớp "example" và "color":
const collection = document.getElementsByClassName("example color");
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức getElementsByClassName()
trả về một tập hợp các phần tử có (các) tên lớp được chỉ định.
Phương thức getElementsByClassName()
trả về HTMLCollection .
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.
Thuộc tính length trả về số phần tử trong bộ sưu tập.
Các phần tử có thể được truy cập theo chỉ mục (bắt đầu từ 0).
Một HTMLCollection đang hoạt động. Nó được tự động cập nhật khi tài liệu được thay đổi.
Cú pháp
document.getElementsByClassName( classname )
Thông số
Parameter | Description |
classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Giá trị trả về
Kiểu | Sự miêu tả |
Sự vật. | Một đối tượng HTMLCollection . Một tập hợp các phần tử có tên lớp được chỉ định. Các phần tử được sắp xếp khi chúng xuất hiện trong tài liệu. |
Thêm ví dụ
Số phần tử có class="example":
let numb = document.getElementsByClassName("example").length;
Hãy tự mình thử »Thay đổi màu nền của tất cả các thành phần bằng class="example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Cú pháp CSS
Tham khảo CSS: Bộ chọn CSS .class
Tham chiếu DOM HTML: phần tử .getElementsByClassName()
Tham chiếu DOM HTML: Thuộc tính className
Tham chiếu DOM HTML: Thuộc tính classList
Tham chiếu DOM HTML: Đối tượng kiểu
Hỗ trợ trình duyệt
document.getElementsByClassName()
là tính năng DOM Cấp 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |