GetElementsByClassName trong Javascript


Hôm trước ta đã học cách dùng getElementById để truy cập vào 1 phần tử của DOM. Hôm nay ta sẽ học cách truy cập nhiều phần tử cùng 1 lúc dùng getElementsByClassName. Ví dụ ta muốn thay đổi background của nhiều phần tử.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS Tuts</title>
</head>
<body>
	<ul>
	  <li class="list-group-item">Item 1</li>
	  <li class="list-group-item">Item 2</li>
	  <li class="list-group-item">Item 3</li>
	  <li class="list-group-item">Item 4</li>
	</ul>

	<script>
	   var li = document.getElementsByClassName('list-group-item');
	   console.log(li); // HTML Collection(4)
	</script>
</body>
</html>

document.getElementsByClassName trả về là tập hợp các thẻ HTML, ví dụ muốn thay đổi background của Item 1.

li[0].style.background = "yellow";

Hoặc muốn thay đổi background là màu cam cho tất cả các thẻ li. Ta dùng vòng lặp for để lặp qua các thẻ li.

for (let i = 0; i< li.length ; i++) {
  li[i].style.background = "orange";
}

thay vì dùng for ta có thể dùng forEach để lặp nhưng muốn dùng forEach thì biến li phải là Array, hiện tại thì biến li là HTML Collection. Ta chuyển thành Array như sau:

li = Array.from(li);

và ta có thể dùng forEach để lặp

li.forEach(function(item, index) {
   item.style.background = "green";
   item.textContent = `${index}: Welcome`;
});

// 0: Welcome 
// 1: Welcome
// 2: Welcome
// 3: Welcome

Các bạn xem code chi tiết bên dưới nhé:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JS Tuts</title>
  </head>
  <body>
    <ul>
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
      <li class="list-group-item">Item 3</li>
      <li class="list-group-item">Item 4</li>
    </ul>

    <script>
      var li = document.getElementsByClassName("list-group-item");
      console.log(li); // HTML Collection(4)
      li[0].style.background = "yellow"; // Item 1 có màu vàng

      for (let i = 0; i < li.length; i++) {
        li[i].style.background = "orange";
      }

      li = Array.from(li);

      li.forEach(function(item, index) {
        item.style.background = "green";
        item.textContent = `${index}: Welcome`;
      });
    </script>
  </body>
</html>

Như vậy là ta đã biết sử dụng getElementsByClassName rồi đấy. ^_^