Phương thức getElementsByClassName() của HTML DOM Document

Định nghĩa và cách sử dụng

getElementsByClassName() Phương thức trả về bộ sưu tập các phần tử có tên lớp chỉ định.

getElementsByClassName() Phương thức trả về HTMLCollection.

getElementsByClassName() Thuộc tính là chỉ đọc.

HTMLCollection

HTMLCollection Là bộ sưu tập các phần tử HTML tương tự như mảng (danh sách).

Có thể truy cập phần tử trong bộ sưu tập qua chỉ số (bắt đầu từ 0).

length Thuộc tính trả về số lượng phần tử trong bộ sưu tập.

Xin xem thêm:

Phương thức getElementById()

Phương thức getElementsByTagName()

Phương thức querySelector()

Phương thức querySelectorAll()

Đối tượng HTMLCollection

Thực thể

Ví dụ 1

Lấy tất cả các phần tử có class="example":

const collection = document.getElementsByClassName("example");

Thử ngay

Ví dụ 2

Lấy tất cả các phần tử có cùng lúc lớp "example" và "color":

const collection = document.getElementsByClassName("example color");

Thử ngay

Ví dụ 3

Số lượng phần tử có class="example":

let numb = document.getElementsByClassName("example").length;

Thử ngay

Ví dụ 4

Thay đổi màu nền của tất cả các phần tử có class="example":

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Thử ngay

Cú pháp

document.getElementsByClassName("classname)

参數

参數 Mô tả
classname

Bắt buộc. Tên lớp của phần tử.

Tìm kiếm nhiều lớp tên bằng cách phân隔 bằng khoảng trống, ví dụ "test demo".

Trả về giá trị

Loại Mô tả
Đối tượng

Đối tượng HTMLCollection.

Bộ sưu tập các phần tử có tên lớp cụ thể.

Sắp xếp các phần tử theo thứ tự xuất hiện trong tài liệu.

Hỗ trợ trình duyệt

document.getElementsByClassName() Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Hướng dẫn CSS:Cú pháp CSS

Tài liệu tham khảo CSS:Chọn器 CSS .class

Tài liệu tham khảo HTML DOM:element.getElementsByClassName()

Tài liệu tham khảo HTML DOM:Thuộc tính className

Tài liệu tham khảo HTML DOM:Thuộc tính classList

Tài liệu tham khảo HTML DOM:Đối tượng Style