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"

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

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 }