Phương thức getElementsByClassName()
Định nghĩa và sử dụng
Phương thức getElementsByClassName() trả về một tập hợp của tất cả các phần tử trong tài liệu với tên class
được chỉ ra, như là một Object node list.
Object node list trình bày một tập hợp các node. Các nodes có thể được truy cập bằng số chỉ mục (index). Chỉ
mục bắt đầu bằng 0.
Tip: Bạn có thể sử dụng đặc tính length của Object node list để quyết định số lượng phần tử với tên class được
chỉ ra, sau đó bạn có thể lặp qua tất cả các phần tử và lấy thông tin bạn muốn.
Cú pháp
document.getElementsByClassName(classname)
Các giá trị tham số
Tham số Dạng Mô tả
classname Chuỗi kí tự Được yêu cầu. Tên class của phần tử bạn muốn lấy. Để tìm nhiều tên class, chia tách chúng với khoảng trắng như test demo
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding:8px;
}
</style>
</head>
<body><h1>The Document Object</h1>
<h2>The getElementsByClassName() Method</h2><p>Change the background color of the first element with the classes “example” and “color”:</p>
<div class=”example”>
<p>This is a paragraph.</p>
</div>
<br>
<div class=”example color”>
<p>This is a paragraph.</p>
</div>
<br>
<div class=”example color”>
<p>This is a paragraph.</p>
</div><script>
const collection = document.getElementsByClassName(“example color”);
collection[0].style.backgroundColor = “red”;
</script></body>
</html>
Xem kết quả:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementsbyclassname2