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

Phương thức getElementsByClassName() trả về tập hợp tất cả các phần tử trong tài liệu có tên class (class name) cho trước. Kết quả là NodeList (HTMLCollection), truy xuất bằng chỉ số index. Phương thức có thể gọi trên bất kỳ phần tử nào để lấy các phần tử con cháu có class tương ứng.

Cú pháp

document.getElementsByClassName(className)

• className (string): Tên class cần tìm. Có thể tìm nhiều class bằng cách phân tách bằng dấu cách.

Ví dụ

Ví dụ thay đổi các đoạn văn có class "PARA1":

<!DOCTYPE html>
<html>
<head>
<script>
  function changePara() {
    var paragraphs = document.getElementsByClassName("PARA1");
    paragraphs[0].innerHTML = "Văn bản này đã được thay đổi";
    paragraphs[1].style.color = "red";
    paragraphs[1].style.backgroundColor = "yellow";
  }
</script>
</head>
<body>
<h1>Ví dụ getElementsByClassName()</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="PARA1">Ut enim ad minim veniam, quis nostrud exercitation...</p>
<button onclick="changePara()">THAY ĐỔI</button>
</body>
</html>

Kết quả

Ban đầu hai đoạn văn có class "PARA1" hiển thị văn bản lorem ipsum.

Sau khi nhấn "THAY ĐỔI": đoạn đầu thay nội dung, đoạn sau đổi màu chữ đỏ, nền vàng.

Giải thích

• Hai đoạn văn được gán class="PARA1".
• Nút "THAY ĐỔI" gọi hàm changePara().
• Hàm lấy tập hợp phần tử class "PARA1" qua getElementsByClassName().
• Thao tác trên từng phần tử qua chỉ số index.