Rate this post

Trong lập trình web, việc truy xuất và thao tác các phần tử DOM (Document Object Model) là một kỹ năng quan trọng giúp tạo ra các trang web động và tương tác. JavaScript cung cấp nhiều phương thức để truy xuất các phần tử DOM, trong đó querySelector và querySelectorAll là hai phương thức mạnh mẽ và linh hoạt. Bài viết này sẽ giới thiệu chi tiết về cách sử dụng querySelector và querySelectorAll, từ cơ bản đến nâng cao, kèm theo các ví dụ thực tế.

Tóm tắt nội dung

Định nghĩa và khái niệm cơ bản

querySelector: Trả về phần tử đầu tiên trong tài liệu phù hợp với bộ chọn CSS được chỉ định. Nếu không tìm thấy phần tử nào, nó trả về null.
querySelectorAll: Trả về một NodeList tĩnh (không sống) của tất cả các phần tử trong tài liệu phù hợp với bộ chọn CSS được chỉ định. Nếu không tìm thấy phần tử nào, nó trả về một NodeList rỗng.

Sự khác biệt chính giữa querySelector và querySelectorAll là querySelector chỉ trả về phần tử đầu tiên tìm thấy, trong khi querySelectorAll trả về tất cả các phần tử phù hợp với bộ chọn.

Sử dụng querySelector

Cú pháp cơ bản của querySelector là:

document.querySelector(selector);

Trong đó, selector là một chuỗi chứa bộ chọn CSS. Ví dụ:

Truy xuất phần tử dựa trên ID:

  let element = document.querySelector("#myId");

Truy xuất phần tử dựa trên class:

  let element = document.querySelector(".myClass");

Truy xuất phần tử dựa trên tag:

  let element = document.querySelector("div");

Sử dụng querySelectorAll

Cú pháp cơ bản của querySelectorAll là:

document.querySelectorAll(selector);

Ví dụ:

Truy xuất tất cả các phần tử dựa trên class:

  let elements = document.querySelectorAll(".myClass");

Truy xuất tất cả các phần tử dựa trên tag:

  let elements = document.querySelectorAll("div");

NodeList trả về bởi querySelectorAll có thể được duyệt qua bằng cách sử dụng vòng lặp:

let elements = document.querySelectorAll(".myClass");
elements.forEach(function(element) {
    console.log(element);
});

Truy xuất các phần tử lồng nhau

Bạn có thể sử dụng querySelector và querySelectorAll để truy xuất các phần tử con lồng nhau. Ví dụ:

// Truy xuất phần tử cha
let parentElement = document.querySelector(".parent");

// Truy xuất phần tử con bên trong phần tử cha
let childElement = parentElement.querySelector(".child");

Ví dụ minh họa:

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    let parentElement = document.querySelector(".parent");
    let childElements = parentElement.querySelectorAll(".child");
    childElements.forEach(function(element) {
        console.log(element.textContent); // Output: "Child 1", "Child 2"
    });
</script>

Hiệu suất và tối ưu hóa

Khi sử dụng querySelector và querySelectorAll, cần lưu ý về hiệu suất. Mặc dù hai phương thức này rất mạnh mẽ, nhưng trong các trường hợp cần truy xuất phần tử nhiều lần, việc sử dụng các phương thức khác như getElementById hoặc getElementsByClassName có thể nhanh hơn.

Ví dụ, getElementById nhanh hơn querySelector khi truy xuất phần tử bằng ID:

let element = document.getElementById("myId"); // Nhanh hơn
let element = document.querySelector("#myId"); // Chậm hơn

Ứng dụng thực tế

Trong thực tế, querySelector và querySelectorAll thường được sử dụng trong các thao tác DOM như cập nhật nội dung, thêm hoặc xóa các phần tử, và lắng nghe các sự kiện.

Ví dụ, cập nhật nội dung của tất cả các phần tử có class .item:

let items = document.querySelectorAll(".item");
items.forEach(function(item) {
    item.textContent = "Updated content";
});

Các lưu ý và lỗi thường gặp

Một số lỗi thường gặp khi sử dụng querySelector và querySelectorAll bao gồm:

Sử dụng bộ chọn không chính xác dẫn đến không tìm thấy phần tử.
Quên kiểm tra giá trị trả về của querySelector có thể dẫn đến lỗi khi thao tác với null.
Không duyệt qua NodeList trả về từ querySelectorAll đúng cách.

Ví dụ thực tế và phân tích

Giả sử bạn đang phát triển một trang web và cần sử dụng querySelector và querySelectorAll để điều khiển hiển thị các mục trong danh sách sản phẩm dựa trên bộ lọc người dùng chọn.

<div class="products">
    <div class="product" data-category="electronics">Product 1</div>
    <div class="product" data-category="clothing">Product 2</div>
    <div class="product" data-category="electronics">Product 3</div>
</div>

<script>
    let filter = "electronics";
    let products = document.querySelectorAll(".product");
    products.forEach(function(product) {
        if (product.getAttribute("data-category") !== filter) {
            product.style.display = "none";
        }
    });
</script>

Kết luận

querySelector và querySelectorAll là các công cụ mạnh mẽ và linh hoạt trong JavaScript để truy xuất và thao tác các phần tử DOM. Hiểu và sử dụng đúng cách hai phương thức này sẽ giúp bạn quản lý DOM hiệu quả hơn, cải thiện trải nghiệm người dùng và tối ưu hóa mã nguồn. Khuyến khích lập trình viên tìm hiểu sâu về querySelector và querySelectorAll để tận dụng tối đa các tính năng của chúng trong dự án web.

JavaScript

QuerySelector và QuerySelectorAll trong JavaScript