Phần tử DOM HTML getElementsByClassName()
Ví dụ
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";
Hãy tự mình thử »Số phần tử có class="child" trong "myDIV":
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;
Hãy tự mình thử »Thay đổi kích thước của phần tử thứ hai bằng class="child":
const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";
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 tất cả các phần tử con có tên lớp nhất định.
Phương thức getElementsByClassName()
trả về HTMLCollection trực tiếp.
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
element .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ụ
Thay đổi kích thước của phần tử đầu tiên bằng các lớp "con" và "color" bên trong phần tử thứ hai bằng class="example":
const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";
Hãy tự mình thử »Thay đổi màu của tất cả các thành phần trong "myDIV" bằng 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";
}
Hãy tự mình thử »Hỗ trợ trình duyệt
element.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 |