Khám Phá Sức Mạnh Của querySelectorAll Trong JavaScript

Giới Thiệu

Bạn đã bao giờ tự hỏi làm thế nào để dễ dàng chọn nhiều phần tử HTML cùng lúc trong JavaScript? Đừng lo lắng, querySelectorAll chính là giải pháp! Bài viết này sẽ giúp bạn hiểu rõ querySelectorAll là gì, cách thức hoạt động và cách ứng dụng hiệu quả trong dự án của bạn.

Chúng ta sẽ cùng nhau:

• Tìm hiểu querySelectorAll là gì và cách thức hoạt động.
• Khám phá cách chọn phần tử dựa trên tên thẻ, lớp, thuộc tính,...
• Áp dụng querySelectorAll để xử lý danh sách phần tử hiệu quả.

Hãy cùng bắt đầu nào!

querySelectorAll Là Gì?

querySelectorAll là một phương thức mạnh mẽ trong JavaScript, cho phép bạn chọn tất cả các phần tử HTML khớp với một bộ chọn CSS nhất định. Kết quả trả về là một NodeList, giống như một mảng chứa tất cả các phần tử phù hợp.

Ví dụ:

const allParagraphs = document.querySelectorAll('p'); // Chọn tất cả các thẻ 
 const redElements = document.querySelectorAll('.red'); // Chọn tất cả phần tử có class "red"

Cách Sử Dụng querySelectorAll

Chọn Phần Tử Theo Tên Thẻ

Để chọn tất cả các phần tử có cùng tên thẻ, bạn chỉ cần truyền tên thẻ vào querySelectorAll.

Ví dụ:

const allImages = document.querySelectorAll('img'); // Chọn tất cả các thẻ 

Chọn Phần Tử Theo Lớp

Để chọn tất cả các phần tử có cùng lớp CSS, sử dụng dấu chấm (.) trước tên lớp.

Ví dụ:

const activeItems = document.querySelectorAll('.active'); // Chọn tất cả phần tử có class "active"

Chọn Phần Tử Theo Thuộc Tính

Bạn cũng có thể chọn các phần tử dựa trên thuộc tính HTML của chúng.

Ví dụ:

const linksToExample = document.querySelectorAll('a[href="https://example.com"]');  // Chọn tất cả thẻ  có href là "https://example.com"

Kết Hợp Các Bộ Chọn

querySelectorAll cho phép bạn kết hợp nhiều bộ chọn để tinh chỉnh kết quả.

Ví dụ:

const redParagraphs = document.querySelectorAll('p.red');  // Chọn tất cả thẻ 
 có class "red"

Xử Lý Danh Sách Phần Tử

Kết quả trả về từ querySelectorAll là một NodeList. Bạn có thể duyệt qua danh sách này và thao tác với từng phần tử.

Ví dụ:

const listItems = document.querySelectorAll('li');  for (let i = 0; i  listItems.length; i++) {   listItems[i].style.color = 'blue'; // Thay đổi màu chữ của tất cả các thẻ 
 thành màu xanh }

Lời Kết

querySelectorAll là một công cụ mạnh mẽ giúp bạn dễ dàng thao tác với nhiều phần tử HTML cùng lúc. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về querySelectorAll và cách ứng dụng nó trong dự án của mình. Chúc bạn coding vui vẻ!