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

• Bùi Tấn Lực
• 861
• 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 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

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 *

Đăng ký tư vấn thiết kế website

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