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

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

getElementsByClassName() Phương thức trả về một tập hợp các phần tử con có tên lớp cho trước, dưới dạng đối tượng NodeList.

Xem thêm:

Thuộc tính classList

Thuộc tính className

Phương thức querySelector()

Phương thức querySelectorAll()

Phương thức getElementsByTagName()

Đối tượng Style của HTML DOM

Hướng dẫn:

Cú pháp CSS

Chọn器 CSS

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

NodeList

NodeList Là một tập hợp các nút tương tự mảng (danh sách).

Bạn có thể truy cập các nút trong danh sách qua chỉ số (biểu thức). Chỉ số bắt đầu từ 0.

Thuộc tính lengthTrả về số lượng nút trong danh sách.

Mô hình

Ví dụ 1

Thay đổi văn bản của mục danh sách đầu tiên bằng class="child":

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

Thử ngay

Ví dụ 2

Số lượng phần tử class="child" trong "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Thử ngay

Ví dụ 3

Thay đổi kích thước của phần tử thứ hai của class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Thử ngay

Ví dụ 4

Sử dụng lớp "child" và "color" trong phần tử thứ hai của class="example" để thay đổi kích thước của phần tử đầu tiên:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Thử ngay

Ví dụ 5

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

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Thử ngay

Cú pháp

element.getElementsByClassName(classname)

Tham số

Tham số Mô tả
classname

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

Dùng khoảng trống để phân隔 nhiều tên (ví dụ "child color").

Giá trị trả về

Loại Mô tả
NodeList

Phần tử con chứa tên lớp được chỉ định.

Các phần tử được sắp xếp theo thứ tự xuất hiện trong mã nguồn.

Hỗ trợ trình duyệt

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

Tất cả các trình duyệt đều hỗ trợ hoàn toàn 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ợ