Phương thức getElementsByClassName() trả về một tập hợp tất cả các phần tử trong tài liệu với tên lớp được chỉ định, giá trị trả về như một đối tượng NodeList.
Đối tượng NodeList này là một HTMLCollection đạ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 bằng 0.
Mẹo: Bạn có thể sử dụng thuộc tính length của đối tượng NodeList để xác định số phần tử có tên lớp được chỉ định, sau đó bạn có thể lặp qua tất cả các phần tử và trích xuất thông tin bạn muốn.
Cú pháp
var elements = document.getElementsByClassName(class_names); // or: var elements = rootElement.getElementsByClassName(class_names);
elements là một mảng các phần tử được tìm thấy.
class_names là một chuỗi đại diện cho danh sách các tên lớp để so sánh; tên lớp được phân tách bằng khoảng trắng
getElementsByClassName có thể được gọi trên bất kỳ phần tử nào, không phải chỉ trên đối tượng document. Phần tử mà phương thức này được gọi sẽ được sử dụng làm gốc của tìm kiếm.
Ví dụ
Lấy tất cả các phần tử có chứa lớp test
document.getElementsByClassName("test");
Lấy tất cả các phần tử có cả hai lớp red và test
document.getElementsByClassName("red test");
Lấy tất cả các phần tử có lớp test, nằm bên trong phần tử có ID main
document.getElementById("main").getElementsByClassName("test");
Tìm xem có bao nhiêu phần tử với class="example" có trong document (sử dụng thuộc tính length của đối tượng NodeList):
var x = document.getElementsByClassName("example").length;
Thay đổi màu nền của tất cả các phần tử có class = "example":
var x = document.getElementsByClassName("example"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }
Chúng ta cũng có thể sử dụng các phương thức của Array.prototype trên bất kỳ HTMLCollection nào bằng cách chuyển HTMLCollection làm giá trị của phương thức này. Ở đây chúng ta sẽ tìm thấy tất cả các phần tử div có một lớp test:
var testElements = document.getElementsByClassName("test"); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ return testElement.nodeName === "DIV"; });
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="parent-id"> <p>hello word1</p> <p class="test">hello word2</p> <p >hello word3</p> <p>hello word4</p> </div> <script> var parentDOM = document.getElementById("parent-id"); var test=parentDOM.getElementsByClassName("test"); //test is not target element console.log(test); //HTMLCollection[1] var testTarget=parentDOM.getElementsByClassName("test")[0]; //here , this element is target console.log(testTarget); //<p class="test">hello word2</p> </script> </body> </html>
Tính tương thích của trình duyệt web
Trình duyệt trên máy tính
| Trình duyệt | Tương thích |
| Chrome | Có |
| Edge | Có |
| FireFox | Từ version 4.0 |
| Internet Eplorer | Từ version 9 |
| Opera | Có |
| Safari | Có |
Trình duyệt trên thiết bị di động
| Trình duyệt | Tương thích |
| Android Webview | Có |
| Chrome for Android | Có |
| Edge Mobile | Có |
| FireFox for Android | Từ version 4.0 |
| Opera | Có |
| iOS Safari | Có |
| Samsung Internet | ? |
