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

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

Phương thức querySelectorAll() trong JavaScript dùng để lấy danh sách các phần tử HTML có class giống nhau 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 để 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.

Cú pháp của Phương thức querySelectorAll() trong JavaScript

var danhsach = tenbien.querySelectorAll("bochoncss");

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

bochoncss: Bộ chọn css ví dụ .tenclass, #id, thẻ HTML,...

danhsach: Danh sách các phần tử HTML có cùng tên class.

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

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

Ở 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:

var list = divid.querySelectorAll(".pclass");

<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

Ở ví dụ này mình lấy các phần tử HTML có cùng một class sau đó đếm xem nó có bao nhiêu phần tử:

var sothe = divid.querySelectorAll("p.pclass").length;

<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

Ở ví dụ này mình lấy các phần tử HTML có cùng một class sau đó dùng for để lặp qua danh sách các phần tử rồi thực hiện các hành động:

<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