Hiểu về phương thức querySelector() trong JavaScript

Trong lập trình JavaScript, việc thường xuyên cần truy cập các phần tử HTML là điều không thể tránh khỏi. Phương thức querySelector() là một trong những công cụ mạnh mẽ giúp bạn thực hiện điều này. Nó thuộc về Web API và cho phép bạn chọn phần tử HTML đầu tiên khớp với bộ chọn CSS được chỉ định.

Cú pháp cơ bản của phương thức querySelector()

Phương thức querySelector() được gọi trên đối tượng document và nhận một tham số là bộ chọn CSS mà bạn muốn dùng để chọn phần tử. Cú pháp của phương thức như sau:

document.querySelector(selector);

Nếu bộ chọn khớp với một phần tử trong tài liệu, phương thức sẽ trả về phần tử khớp đầu tiên. Ngược lại, nếu không có phần tử nào khớp, phương thức sẽ trả về null.

Sử dụng phương thức querySelector() với Bộ chọn loại

Bộ chọn loại trong CSS đề cập đến tên của phần tử HTML như button, div, p, v.v. Ví dụ dưới đây cho thấy cách truy cập phần tử button trong HTML:

<button>Show Alert</button>

Để truy cập phần tử này trong JavaScript, bạn có thể viết:

const buttonElement = document.querySelector("button");

Dòng mã trên sẽ chọn nút đầu tiên trên trang và gán cho biến buttonElement. Để kiểm tra kết quả, bạn có thể sử dụng:

console.log(buttonElement);

Bạn có thể thêm một trình lắng nghe sự kiện cho buttonElement để hiển thị thông báo khi nút được nhấp:

buttonElement.addEventListener("click", () => {
  alert("Button was clicked!");
});

Sử dụng phương thức querySelector() với Bộ chọn lớp

Bộ chọn lớp trong CSS đại diện cho tên lớp của phần tử HTML, ví dụ: .container, .button, v.v.

Giả sử bạn đang phát triển một trò chơi solitaire và muốn quản lý việc hiển thị các quy tắc của trò chơi. Dưới đây là đoạn mã HTML:

<h1>Let's play solitaire!</h1>
<main>
  <button class="rules-btn">Show Rules</button>
  <section class="rules-container">
    <h2>Rules to the game</h2>
    <ul>
      <li>There are 7 columns of cards</li>
      <li>First column has 1 card, second has 2, third has 3, and so on</li>
      <li>First card in each column is face up, rest are face down</li>
      <li>Move cards to build 4 stacks of cards in ascending order</li>
      <li>Start with aces and build up to kings</li>
      <li>Move cards by dragging and dropping</li>
    </ul>
  </section>
</main>

Trong tệp JavaScript, bạn có thể chọn nút và vùng chứa quy tắc như sau:

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

Tiếp theo, bạn có thể thêm một trình lắng nghe sự kiện như sau để hiển thị hoặc ẩn vùng chứa quy tắc khi nhấp vào nút:

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
});

Khi bạn nhấp vào nút, quy tắc sẽ được hiển thị hoặc ẩn đi, tạo ra một trải nghiệm tương tác thú vị.

Cải thiện chức năng ẩn/hiện quy tắc

Mặc dù nút chuyển đổi đang hoạt động, nhưng bạn cần thêm một chức năng để thay đổi văn bản nút từ "Show Rules" thành "Hide Rules" khi quy tắc được hiển thị và trở lại khi quy tắc bị ẩn:

rulesBtn.textContent = rulesContainer.classList.contains("show") 
  ? "Hide Rules" 
  : "Show Rules";

Dưới đây là đoạn mã hoàn chỉnh:

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
  rulesBtn.textContent = rulesContainer.classList.contains("show")
    ? "Hide Rules"
    : "Show Rules";
});

Sử dụng phương thức querySelectorAll() để chọn nhiều phần tử

Khác với querySelector(), phương thức querySelectorAll() cho phép bạn nhận được tất cả các phần tử khớp với bộ chọn đã chỉ định dưới dạng một NodeList. Điều này rất hữu ích khi bạn muốn tương tác với nhiều phần tử cùng một lúc. Ví dụ, bạn có thể xem xét HTML dưới đây:

<button class="btn">Generate Random Background Colors</button>
<ul class="sports-list">
  <li>Football</li>
  <li>Basketball</li>
  <li>Tennis</li>
  <li>Golf</li>
  <li>Swimming</li>
</ul>

Để chọn tất cả các mục trong danh sách, bạn có thể viết:

const sportsList = document.querySelectorAll(".sports-list li");

Khi bạn ghi ra sportsList, bạn sẽ thấy tất cả các phần tử trong danh sách:

console.log(sportsList);

Bên cạnh đó, bạn cũng cần chọn nút:

const randomColorBtn = document.querySelector(".btn");

Bạn có thể tạo một danh sách màu sắc ngẫu nhiên bằng cách sử dụng mảng màu nhẹ sau:

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  "#FAFAD2",
  "#F0FFF0",
  "#E0FFFF",
  "#AFEEEE",
  "#00CED1",
  "#00BFFF",
  "#1E90FF",
  "#ADD8E6",
  "#7FFFD4",
  "#7CFC00",
  "#7FFF00",
  "#32CD32",
  "#ADFF2F",
  "#FFFF00",
  "#FFD700",
  "#FFA500",
  "#FF6347",
];

Tạo màu nền ngẫu nhiên với thuật toán xáo trộn Fisher-Yates

Để xáo trộn mảng màu, bạn có thể sử dụng thuật toán Fisher-Yates như sau:

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

Sau đó, kết hợp với trình lắng nghe sự kiện, bạn có thể tạo màu nền cho các mục danh sách:

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);

  sportsList.forEach((list, index) => {
    list.style.backgroundColor = shuffledColors[index];
  });
});

Tổng kết

Phương thức querySelector() và querySelectorAll() là hai công cụ cực kỳ hữu ích trong JavaScript giúp thao tác với DOM một cách hiệu quả. Bạn có thể sử dụng chúng để chọn phần tử theo nhiều tiêu chí khác nhau như loại, lớp, id, thuộc tính, v.v. Hãy thử nghiệm với các phương thức này trong dự án của bạn và xem bạn có thể sáng tạo ra điều gì thú vị!

Hy vọng bài viết này đã cung cấp cho bạn những thông tin hữu ích và rõ ràng. Cảm ơn bạn đã theo dõi.
source: viblo