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

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

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ử

Những Lưu Ý Khi Sử Dụng querySelectorAll()

Khi sử dụng querySelectorAll(), kết quả nhận được không chỉ đơn giản là một danh sách phần tử. Hiểu cách NodeList hoạt động, thời điểm dữ liệu được cập nhật và cách viết selector chính xác sẽ giúp tránh nhiều lỗi khi thao tác với DOM.

Vì Sao Kết Quả querySelectorAll() Không Tự Cập Nhật?

querySelectorAll() trả về một NodeList tĩnh. Điều này có nghĩa là danh sách được tạo tại thời điểm truy vấn và không tự thay đổi khi có phần tử mới được thêm vào DOM hoặc phần tử cũ bị xóa.

const items = document.querySelectorAll(".item");

const newItem = document.createElement("div");
newItem.className = "item";
document.body.appendChild(newItem);

console.log(items.length);

Trong ví dụ trên, biến items vẫn giữ kết quả của lần truy vấn ban đầu. Phần tử mới thêm vào sau đó không tự xuất hiện trong NodeList này. Nếu cần lấy lại danh sách mới nhất, hãy thực hiện lại querySelectorAll().

const items = document.querySelectorAll(".item");

const newItem = document.createElement("div");
newItem.className = "item";
document.body.appendChild(newItem);

const updatedItems = document.querySelectorAll(".item");

console.log(updatedItems.length);

Cách Xử Lý NodeList Hiệu Quả Trong JavaScript

NodeList do querySelectorAll() trả về có thể duyệt trực tiếp bằng forEach(). Đây là cách đơn giản khi cần áp dụng cùng một thao tác cho nhiều phần tử.

const buttons = document.querySelectorAll(".button");

buttons.forEach((button) => {
    button.classList.add("active");
});

Nếu cần sử dụng các phương thức đặc trưng của Array, có thể chuyển NodeList thành mảng bằng Array.from() hoặc toán tử spread.

const items = document.querySelectorAll(".item");
const itemArray = Array.from(items);

const names = itemArray.map((item) => item.textContent);

Không nhất thiết phải chuyển đổi trong mọi trường hợp. Với các thao tác duyệt, đọc nội dung hoặc thay đổi thuộc tính đơn giản, xử lý trực tiếp NodeList thường ngắn gọn và dễ kiểm soát hơn.

Những Lỗi Selector Thường Gặp Khi Truy Vấn Nhiều Phần Tử

Selector truyền vào querySelectorAll() phải tuân theo cú pháp selector của CSS. Chỉ cần viết sai cú pháp, truy vấn có thể không thực hiện được và phát sinh lỗi.

const items = document.querySelectorAll(".item[data-type="product"]");

Với các giá trị thuộc tính có dấu ngoặc kép, cần chú ý cách đặt dấu nháy trong chuỗi JavaScript. Có thể đổi loại dấu nháy bên ngoài hoặc escape ký tự để tạo selector hợp lệ.

const items = document.querySelectorAll('.item[data-type="product"]');

Ngoài ra, tên class hoặc id được tạo động cũng cần được xử lý cẩn thận nếu chứa ký tự đặc biệt. Khi selector đến từ dữ liệu bên ngoài, CSS.escape() có thể giúp tạo chuỗi phù hợp trước khi thực hiện truy vấn.

const value = "item:active";
const selector = "." + CSS.escape(value);

const items = document.querySelectorAll(selector);

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

Đánh giá

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 *

Bình luận, Hỏi đáp