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

• Bùi Tấn Lực
• 25
• 15/09/2025

Phương thức querySelectorAll() trong JavaScript dùng để thực hiện hành động trên nhiều phần tử HTML thông qua bộ chọn CSS mà bạn đưa vào, chi tiết như nào hãy cùng chúng tôi phân tích:

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

Chức năng của Phương thức querySelectorAll() trong JavaScript

Phương thức querySelectorAll() trong JavaScript dùng để thực hiện hành động trên nhiều phần tử HTML thông qua bộ chọn CSS mà bạn đưa vào.

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

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

<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";
}
</script>

Chạy Thử

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

<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>Số phần tử html có class pclass nằm trong thẻ div id divid: <span id="sothe"></span></p>
<script>
  // Lấy id div
  var divid = document.getElementById("divid");
  // Đếm số phần tử html
  var sothe = divid.querySelectorAll("p.pclass").length;
  // Nhúng số phần tử đếm được
  document.getElementById("sothe").innerHTML = sothe;
</script>

Chạy Thử

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

<div id="divid">
    <p>Hàng 1</p>
    <p>Hàng 2</p>
    <p>Hàng 3</p>
    <p>Hàng 4</p>
    <p>Hàng 5</p>
</div>
<script>
// Lấy ID Cha
var divid = document.getElementById("divid");
// Lấy danh sách thẻ p trong div cha có id divid
var list = divid.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
  // Lặp qua mỗi phần tử và cho css màu chữ đỏ
  list[i].style.color = "red";
}
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức querySelectorAll() trong JavaScript.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức querySelectorAll() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn