Phương thức querySelectorAll() class trong JavaScript

Trình soạn thảo - Phương thức querySelectorAll() class trong JavaScript

Kết quả - Phương thức querySelectorAll() class trong JavaScript

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức querySelectorAll() class trong JavaScript</title>
</head>
<body>

<h1>Phương thức querySelectorAll() class trong JavaScript</h1>
<p>Dùng để lấy danh sách các phần tử HTML có class giống nhau sau đó thực hiện các hành động như lấy giá trị của thuộc tính hoặc tạo các giá trị cho thuộc tính thông qua bộ chọn CSS mà bạn đưa vào, ở ví dụ này mình lấy các phần tử HTML có cùng một class sau đó thêm giá trị cho style và kiểm tra giá trị của class có tồn tại không:</p>

<div id="divid">
    <p class="pclass">Hàng 1</p>
    <p class="pclass">Hàng 2</p>
    <p class="pclass">Hàng 3</p>
    <p class="pclass">Hàng 4</p>
    <p class="pclass">Hàng 5</p>
</div>
<p>Click vào nút THAY ĐỔI CLASS để thực hiện hàng loạt hành động</p>
<button onclick="thayDoiClass()">THAY ĐỔI CLASS</button>
<script>
function thayDoiClass() {
  var divid = document.getElementById("divid");
  var list = divid.querySelectorAll(".pclass");
  list[1].style.color = "red";
  list[1].style.fontSize = "30px";
  list[2].style.fontSize = "20px";
  // Kiểm tra xem phần tử thứ 2 có chứa giá trị pclass của class hay không
  alert(list[2].classList.contains("pclass"));
}
</script>
</body>
</html>