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.
Tóm Tắt
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
Lấy tất cả các phần tử có cả hai lớp red
và 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
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
?