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

Phương thức HTML DOM getElementsByClassName () được sử dụng để lấy bộ sưu tập của tất cả các phần tử trong tài liệu có tên lớp nhất định. Nó trả về tất cả các phần tử đã cho dưới dạng một đối tượng NodeList. Bạn có thể truy cập bất kỳ phần tử nào trong đối tượng trả về bằng cách sử dụng số chỉ mục. Phương thức này có thể được gọi trên bất kỳ phần tử riêng lẻ nào có các phần tử con hậu duệ của nó có tên lớp đã cho.

Cú pháp

Sau đây là cú pháp cho phương thức getElementsByClassName () -

document.getElementsByClassName(classname)

Ở đây, tên lớp là kiểu chuỗi cho biết tên lớp của phần tử bạn muốn truy cập. Nhiều tên lớp cũng có thể được tìm kiếm bằng cách tách chúng bằng dấu cách.

Ví dụ

Chúng ta hãy xem một ví dụ về phương thức getElementsByClassName () -

<!DOCTYPE html>
<html>
<head>
<script>
   function changePara() {
      var p = document.getElementsByClassName("PARA1");
      p[0].innerHTML = "This text has been changed";
      p[1].style.color = "red";
      p[1].style.backgroundColor = "yellow";
   }
</script>
</head>
<body>
<h1>getElementsByClassName() example</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

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

Khi nhấp vào nút THAY ĐỔI -

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

Trong ví dụ trên -

Chúng tôi đã tạo hai đoạn văn có classname =”PARA1” được liên kết với chúng.

<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

Sau đó, chúng tôi đã tạo một nút CHANGE sẽ thực thi changePara () khi được người dùng nhấp vào -

<button onclick="changePara()">CHANGE</button>

Phương thức changePara () nhận cả hai phần tử

dưới dạng nodeListObject bằng cách sử dụng phương thức getElementsByClassName () trên đối tượng document và gán nó cho biến p. Sử dụng các số chỉ mục, chúng tôi thay đổi văn bản cho đoạn đầu tiên và áp dụng một số kiểu dáng cho đoạn thứ hai -

function changePara() {
   var p = document.getElementsByClassName("PARA1");
   p[0].innerHTML = "This text has been changed";
   p[1].style.color = "red";
   p[1].style.backgroundColor = "yellow";
}