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

Thí dụ

Thay đổi văn bản của mục danh sách đầu tiên với class = "child" (chỉ mục 0) trong danh sách có class = "example":

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Thêm các ví dụ "Hãy tự mình thử" bên dưới.

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

Phương thức getElementsByClassName () trả về một tập hợp các phần tử con của một phần tử với tên lớp được chỉ định, như một đối tượng NodeList.

Đối tượng NodeList đại diện cho một tập hợp các nút. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.

Mẹo: Bạn có thể sử dụng thuộc tính độ dài của đối tượng NodeList để xác định số lượng nút con với tên lớp được chỉ định, sau đó bạn có thể lặp qua tất cả các nút và trích xuất thông tin bạn muốn.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.

Method
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

Cú pháp

element.getElementsByClassName(classname)

Giá trị tham số

Parameter	Type	Description
classname	String	Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color".

Chi tiết kỹ thuật

Phiên bản DOM:	Đối tượng phần tử cấp 1 cốt lõi
Giá trị trả lại:	Một đối tượng NodeList, đại diện cho một tập hợp các phần tử con của các phần tử với tên lớp được chỉ định. Các phần tử trong bộ sưu tập trả về được sắp xếp khi chúng xuất hiện trong mã nguồn.

Các ví dụ khác

Thí dụ

Thay đổi màu nền của phần tử thứ hai với class = "child" bên trong phần tử <div>:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Thí dụ

Tìm xem có bao nhiêu phần tử có class = "child" bên trong một phần tử <div> (sử dụng thuộc tính length của đối tượng NodeList):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

Thí dụ

Thay đổi màu nền của phần tử đầu tiên với cả lớp "con" và "màu" bên trong phần tử có class = "example":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Thí dụ

Thay đổi màu nền của tất cả các phần tử có class = "child" bên trong phần tử <div>:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}