getElementById. getElementByClass. Bạn có thể đã nghe về các hàm này. Cả hai đều cho phép chọn một phần tử cụ thể trong JavaScript.
Khi bạn đã chọn một phần tử, bạn có thể thay đổi nội dung, sửa đổi trạng thái, hoặc thậm chí làm nó biến mất.
Có một hàm khác bạn có thể dùng để chọn mục trên trang web trong JavaScript: querySelector. Hàm này có một hàm chị em gọi là querySelectorAll, trả về tất cả các phần tử khớp với một truy vấn cụ thể.
Trong hướng dẫn này, chúng ta sẽ thảo luận cách sử dụng phương thức querySelector và querySelectorAll. Chúng ta sẽ đi qua ví dụ của các phương thức này trong thực tế để bạn sẵn sàng dùng chúng trong mã.
querySelector là gì?
querySelector là hàm trả về phần tử khớp với truy vấn CSS. Lưu ý querySelector chỉ trả về lần đầu tiên của một bộ chọn. Khi dùng querySelector, bạn có thể chỉ định bất kỳ bộ chọn CSS nào bạn muốn. Ví dụ, bạn có thể truy xuất phần tử có ID cụ thể, hoặc phần tử theo tên thẻ.
Bạn có thể dùng hàm này như sau:
var elementName = document.querySelector('#thisElement');
Chúng ta chỉ định bộ chọn CSS để khớp trong dấu ngoặc kép. Ngoài ra, bạn có thể dùng phương thức để chọn phần tử bên trong phần tử khác:
var parentElement = document.querySelector('main'); var childElement = document.querySelector('#childElement');
Điều này sẽ trả về phần tử có ID #childElement nằm bên trong thẻ <main> trong file HTML của chúng ta.
Phương thức querySelectorAll hoạt động theo cách tương tự. Khác biệt là nó trả về tất cả các khớp tìm thấy bởi bộ chọn truy vấn, thay vì chỉ cái đầu tiên:
var allParagraphs = document.querySelectorAll('p');
Điều này sẽ trả về danh sách tất cả thẻ <p> trên trang HTML.
Dưới đây là một vài ví dụ bộ chọn bạn có thể dùng với hàm này:
- p: Chọn tất cả thẻ <p> trên trang.
- #name_field: Chọn phần tử có id "name_field"
- .list: Chọn tất cả phần tử có tên class "list"
- div > p: Chọn tất cả phần tử <p> nằm bên trong phần tử <div>.
Bạn có thể chỉ định nhiều bộ chọn sử dụng querySelector và querySelectorAll. Để tìm hiểu thêm về bộ chọn CSS, xem hướng dẫn về bộ chọn thuộc tính CSS và HTML.
Nếu không tìm thấy khớp, null được trả về.
Cách sử dụng Query Selector
Hãy xây dựng một ứng dụng web đơn giản để minh họa cách phương thức querySelector hoạt động. Chúng ta sẽ tạo trang web hiển thị một sự thật về HTML. Chúng ta sẽ dùng querySelector để thêm nút, khi nhấp sẽ bật "chế độ tối".
Thiết lập Front End
Chúng ta bắt đầu bằng thiết lập front-end cho trang:
<!DOCTYPE html> <html> <head> <title>HTML Facts!</title> <link rel="stylesheet" href="./facts.css"> </head> <body> <div class="mainBox"> <h1 class="text">HTML Facts!</h1> <p class="text">Bạn có biết HTML thực sự dựa trên ngôn ngữ đánh dấu khác, SGML, hay Standard Generalized Markup Language?</p> <button type="button">Bật chế độ tối</button> </div> <script src="./facts.js"></script> </body> </html>
Chúng ta đã tạo trang web HTML đơn giản hiển thị sự thật về HTML. Ngay bây giờ, trang trông như sau:
Mặc dù trang cho người dùng sự thật về HTML, nhưng thiếu hai tính năng chính: kiểu dáng và nút chế độ tối hoạt động. Hãy thêm kiểu dáng sau vào file facts.css:
.mainBox { margin: auto; width: 50%; text-align: center; background: hotpink; padding: 5%; } body { background: lightblue; } button { padding: 10px; background: lightgreen; border-radius: 10px; border: none; }
Những kiểu dáng này làm trang web trông đẹp hơn:
Đó là tất cả chúng ta cần làm về front-end. Bây giờ tập trung thêm chế độ tối bằng JavaScript.
Thêm chế độ tối bằng JavaScript
Hàm chế độ tối nên bao gồm hai tính năng:
- Tiêu đề và đoạn văn trong hộp nên chuyển sang màu trắng.
- Nền xanh của trang nên chuyển sang đen.
Hãy bắt đầu bằng cách chọn các phần tử DOM (phần tử trang web) mà chúng ta muốn nhắm đến: tiêu đề, đoạn văn, và phần thân chính của trang. Chúng ta làm điều này trong file facts.js:
const heading = document.querySelector("h1"); const paragraph = document.querySelector("p"); const body = document.querySelector("body");
Mã này trả về phần tử đầu tiên trong tài liệu có thẻ <h1>, <p>, và <body>. Bây giờ chúng ta tạo hàm thay đổi màu chữ và thẻ body. Chúng ta đổi màu tiêu đề và đoạn văn thành trắng và nền trang thành đen.
function enableDarkMode() { heading.setAttribute("style", "color: white;"); paragraph.setAttribute("style", "color: white;"); body.setAttribute("style", "background-color: black;"); }
Chúng ta gần xong. Bước tiếp theo là thiết lập trình lắng nghe sự kiện. Trình lắng nghe này sẽ lắng nghe khi nào người dùng nhấp nút. Khi người dùng nhấp nút, chế độ tối sẽ được bật:
document.querySelector("button").addEventListener("click", enableDarkMode);
Hãy xem điều gì xảy ra khi nhấp nút:
Trang web đã chuyển thành công sang chế độ tối.
Kết luận (và Thử thách)
Bạn sẽ nhận thấy mã chỉ cho phép bật chế độ tối. Vậy làm sao tắt? Đây là thử thách cho bạn: viết mã cho phép người dùng tắt chế độ tối trên trang.
Phương thức querySelector cho phép chọn phần tử HTML dựa trên truy vấn bộ chọn CSS. Phương thức này trả về lần khớp đầu tiên. Bạn có thể dùng querySelectorAll để lấy danh sách tất cả phần tử khớp với bộ chọn chỉ định.
Bây giờ bạn đã sẵn sàng sử dụng phương thức querySelector như một chuyên gia JavaScript!