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

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

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, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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

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

Phương thức querySelector() 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 ĐỔ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

<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("https://webmoi.vn/phuong-thuc-queryselector-trong-javascript/#idhang").innerHTML = "Hàng chính";
}
</script>

Chạy Thử

Phương thức querySelector() phần tử 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>
<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 miễn phí

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