querySelector

Bài học 8 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Hàm (function) querySelector() chọn phần tử đầu tiên khớp với một bộ chọn giống CSS mạnh mẽ, mang lại nhiều linh hoạt hơn các phương thức trước đó khi chọn phần tử phức tạp. Ví dụ:

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

Đây là cách chúng ta truy cập phần tử button có id btn.

Thử thách

Dễ

Bạn được cung cấp đoạn code HTML có một nút.

Chỉ sử dụng JavaScript,

Lấy phần tử bằng hàm querySelector.
Đổi backgroundColor thành màu đỏ bằng thuộc tính style.
Đổi color thành màu trắng bằng thuộc tính style.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <button id="myButton">Click Me</button>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementById Chỉnh sửa kiểu dáng phần tử getElementsByClassName Duyệt qua và thao tác getElementsByTagNamequerySelector

3Các phương thức DOM II

querySelectorAll addEventListener innerHTML createElement và appendChild Chuyển đổi classList

Tự luyện tập: Playground Web