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

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

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

Phương thức querySelector() trong JavaScript dùng để thực hiện các hành động vào thẻ html bằng cách gắn bộ chọn css vào phương thức, phương thức chỉ áp dụng cho phần tử html đầu tiên, bộ chọn gồm thẻ html, class, id,....

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

tenbien.querySelector("bochoncss").phuongthuc;

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,...

phuongthuc: Phương thức này để lấy thông tin của phần tử đầu tiên hoặc để tạo giá trị cho các thuộc tính của phần tử đầu tiên theo bộ chọn css.

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

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

 divid.querySelector(".pclass").style.color = "red";

<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 ĐỔI MÀU để cho Hàng 1 thành màu đỏ</p>
<button onclick="doiMau()">ĐỔI MÀU</button>
<script>
function doiMau() {
  var divid = document.getElementById("divid");
  divid.querySelector(".pclass").style.color = "red";
}
</script>

Chạy Thử

Phương thức querySelector() id trong JavaScript

divid.querySelector('#idhang').innerHTML = "Hàng chính";

<div id="divid">
    <p class="pclass">Hàng 1</p>
    <p class="pclass">Hàng 2</p>
    <p id="idhang">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 ĐỔI TÊN để đổi tên cho id idhang</p>
<button onclick="doiTen()">ĐỔI TÊN</button>
<script>
function doiTen() {
  var divid = document.getElementById("divid");
  divid.querySelector('#idhang').innerHTML = "Hàng chính";
}
</script>

Chạy Thử

Phương thức querySelector() phần tử trong JavaScript

divid.querySelector("p").style.color = "red";

<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>
<p>Click vào nút ĐỔI MÀU để cho Hàng 1 thành màu đỏ</p>
<button onclick="doiMau()">ĐỔI MÀU</button>
<script>
function doiMau() {
  var divid = document.getElementById("divid");
  divid.querySelector("p").style.color = "red";
}
</script>

Chạy Thử

Lỗi thường gặp khi sử dụng querySelector trong JavaScript

Phần lớn lỗi khi dùng querySelector() không nằm ở phương thức mà xuất phát từ selector, thời điểm truy cập DOM hoặc cách xử lý kết quả trả về. Nhận biết đúng từng trường hợp sẽ giúp mã JavaScript ổn định hơn và tránh phải kiểm tra lỗi theo cách thủ công.

Selector không đúng cú pháp

querySelector() sử dụng cú pháp selector tương tự CSS. Vì vậy, nếu viết sai cách chọn phần tử, JavaScript có thể phát sinh lỗi thay vì trả về kết quả mong muốn.

Chẳng hạn, khi chọn phần tử theo class, selector phải bắt đầu bằng dấu chấm; khi chọn theo ID, cần dùng dấu thăng. Với selector phức tạp, nên kiểm tra lại từng thành phần trước khi đưa vào querySelector().

const box = document.querySelector(".content");
const title = document.querySelector("#title");

Nếu selector được tạo động từ dữ liệu bên ngoài, càng cần kiểm tra giá trị trước khi sử dụng. Một selector không hợp lệ có thể khiến toàn bộ đoạn mã phía sau không được thực thi.

Không tìm thấy phần tử với querySelector

Khi selector hợp lệ nhưng không có phần tử phù hợp, querySelector() sẽ trả về null. Đây là trường hợp rất dễ gặp khi class hoặc ID trong JavaScript không khớp với HTML.

Vì vậy, không nên sử dụng kết quả ngay khi chưa chắc phần tử tồn tại.

const button = document.querySelector("#submit");

if (button) {
    button.textContent = "Đã sẵn sàng";
}

Cách kiểm tra này đặc biệt hữu ích với các thành phần chỉ xuất hiện ở một số trang hoặc được tạo ra tùy theo điều kiện. Nó giúp tránh lỗi khi JavaScript cố truy cập thuộc tính hoặc phương thức của giá trị null.

Nhầm giữa querySelector và querySelectorAll

Hai phương thức có cách viết khá giống nhau nhưng mục đích sử dụng khác nhau. querySelector() lấy phần tử đầu tiên phù hợp với selector, còn querySelectorAll() lấy toàn bộ các phần tử phù hợp.

Do đó, nếu cần xử lý một phần tử cụ thể, querySelector() thường phù hợp hơn. Ngược lại, khi muốn thao tác với nhiều phần tử cùng lúc, cần sử dụng querySelectorAll() và xử lý tập kết quả tương ứng.

const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");

Nhầm lẫn giữa hai phương thức có thể khiến code chỉ tác động lên phần tử đầu tiên trong khi mục tiêu thực tế là xử lý toàn bộ danh sách.

Gọi querySelector khi DOM chưa sẵn sàng

Một lỗi khác thường xuất hiện khi JavaScript chạy trước lúc các phần tử cần tìm được trình duyệt tạo vào DOM. Khi đó, selector có thể hoàn toàn chính xác nhưng kết quả vẫn là null.

Để tránh tình trạng này, cần đảm bảo đoạn mã truy vấn được thực thi sau khi cấu trúc HTML cần thiết đã sẵn sàng. Với những đoạn script đặt ở cuối tài liệu HTML, vấn đề này thường ít xảy ra hơn.

document.addEventListener("DOMContentLoaded", function () {
    const title = document.querySelector(".title");

    if (title) {
        title.textContent = "Web Mới";
    }
});

Điều quan trọng là phân biệt lỗi do selector với lỗi do thời điểm thực thi. Nếu selector đúng nhưng DOM chưa có phần tử tương ứng, việc thay đổi selector sẽ không giải quyết được nguyên nhân.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức querySelector() 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 querySelector() 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