Rate this post

querySelectorAll() là một hàm trong JavaScript được sử dụng để tìm kiếm tất cả các phần tử trong một trang web mà thỏa mãn một số điều kiện được chỉ định bằng một chuỗi của CSS selector. Nó trả về một NodeList các phần tử thỏa mãn điều kiện đã chỉ định, và bạn có thể sử dụng các phương thức và thuộc tính của NodeList để làm việc với các phần tử đã tìm thấy.

Các bài viết liên quan:

Ví dụ:

let elements = document.querySelectorAll('.class-name');

console.log(elements);

Trong ví dụ trên, hàm querySelectorAll() sẽ tìm kiếm tất cả các phần tử có class là “class-name” trong trang web và trả về một NodeList các phần tử thỏa mãn điều kiện.

Chú ý: Phương thức này chỉ tìm kiếm trong các phần tử con của nó mà nó được gọi. Nếu muốn tìm kiếm toàn bộ trang web, bạn cần gọi querySelectorAll() trên document hoặc trên một phần tử cha.

Tại sao nên sử dụng querySelectorAll() ?

Sử dụng querySelectorAll() có nhiều lợi ích, bao gồm:

  1. Tiện dụng: querySelectorAll() cho phép bạn tìm kiếm nhanh chóng và dễ dàng tất cả các phần tử thỏa mãn điều kiện bằng cách sử dụng một chuỗi CSS selector.
  2. Tìm kiếm nhiều phần tử: Nó cho phép bạn tìm kiếm nhiều phần tử cùng một lúc, giúp tiết kiệm thời gian và tăng hiệu suất.
  3. Làm việc với NodeList: Kết quả trả về là một NodeList, nên bạn có thể dễ dàng làm việc với các phần tử đã tìm thấy bằng cách sử dụng các phương thức và thuộc tính của NodeList.
  4. Tìm kiếm trong phần tử con: Phương thức này chỉ tìm kiếm trong các phần tử con của nó mà nó được gọi, giúp bạn tìm kiếm nhanh chóng và chính xác trong phạm vi cần thiết.
  5. Sử dụng với arrow function: Hàm querySelectorAll() có thể sử dụng với arrow function.
  6. Sử dụng với kiểu dữ liệu khác : Hàm querySelectorAll() chỉ được sử dụng trên đối tượng DOM, nếu sử dụng trên kiểu dữ liệu khác như số, chuỗi, boolean sẽ không có tác dụng.
  1. Cập nhật tự động: Khi có sự thay đổi trong trang web, kết quả trả về của querySelectorAll() sẽ tự động cập nhật, giúp bạn luôn luôn làm việc với dữ liệu mới nhất.
  2. Có thể sử dụng với các thư viện khác: querySelectorAll() là một phương thức của JavaScript và có thể dễ dàng sử dụng với các thư viện khác như jQuery, AngularJS, ReactJS v.v.
  3. Sử dụng với các thao tác trên nhiều phần tử: Vì nó trả về một NodeList các phần tử thỏa mãn điều kiện, nên bạn có thể dễ dàng thực hiện các thao tác trên nhiều phần tử cùng lúc, chẳng hạn như thay đổi class, chèn nội dung vào nhiều phần tử cùng lúc.
  4. Tìm kiếm theo nhiều điều kiện: querySelectorAll() cho phép bạn tìm kiếm theo nhiều điều kiện bằng cách sử dụng các combinator CSS, chẳng hạn như tìm kiếm các phần tử con của một phần tử cha, các phần tử có class nào đó, các phần tử có thuộc tính nào đó v.v. Điều này giúp cho việc tìm kiếm trở nên chính xác hơn và tiện dụng hơn.
  1. Tìm kiếm theo điều kiện giống nhau: querySelectorAll() cho phép bạn tìm kiếm theo nhiều điều kiện giống nhau, chẳng hạn như tìm kiếm các phần tử có class giống nhau.
  2. Tìm kiếm theo thứ tự: querySelectorAll() cho phép bạn tìm kiếm theo thứ tự các phần tử trong trang web bằng cách sử dụng các pseudo-class CSS như :first-child, :last-child, :nth-child() v.v.

Sử dụng querySelectorAll() trong JavaScript như thế nào ?

Sử dụng querySelectorAll() trong JavaScript rất đơn giản, bạn chỉ cần gọi phương thức này trên một đối tượng DOM và truyền vào một chuỗi CSS selector làm tham số.

Ví dụ:

let elements = document.querySelectorAll('.class-name');

console.log(elements);

Trong ví dụ trên, hàm querySelectorAll() sẽ tìm kiếm tất cả các phần tử có class là “class-name” trong trang web và trả về một NodeList các phần tử thỏa mãn điều kiện.

Bạn cũng có thể gọi querySelectorAll() trên một phần tử cha để tìm kiếm trong phạm vi phần tử con của nó.

let parent = document.getElementById('parent');

let elements = parent.querySelectorAll('.class-name');

console.log(elements);

Trông ví dụ  trên, hàm querySelectorAll() sẽ tìm kiếm tất cả các phần tử có class là “class-name” trong phạm vi của phần tử cha có id là “parent” và trả về một NodeList các phần tử thỏa mãn điều kiện.

Bạn cũng có thể sử dụng các combinator CSS để tìm kiếm theo nhiều điều kiện, chẳng hạn như tìm kiếm các phần tử con của một phần tử cha hoặc tìm kiếm các phần tử có class giống nhau trong cùng một phần tử cha.

let elements = document.querySelectorAll('#parent .class-name');

console.log(elements);

Trong ví dụ trên, hàm querySelectorAll() sẽ tìm kiếm tất cả các phần tử có class là “class-name” và là phần tử con của phần tử cha có id là “parent” và trả về một NodeList các phần tử thỏa mãn điều kiện.

Sau khi gọi hàm querySelectorAll(), bạn có thể sử dụng các phương thức và thuộc tính của NodeList để làm việc với các phần tử đã tìm thấy, chẳng hạn như forEach() để duyệt qua từng phần tử, hoặc item() để truy cập tới một phần tử cụ thể trong NodeList.

elements.forEach(function(element) {

  console.log(element);

});

let firstElement = elements.item(0);

console.log(firstElement);

Những lưu ý khi sử dụng  querySelectorAll()

  1. Chỉ trả về phần tử đầu tiên: querySelectorAll() chỉ trả về một NodeList chứa tất cả các phần tử thỏa mãn điều kiện, nếu bạn chỉ muốn trả về phần tử đầu tiên, bạn có thể sử dụng querySelector() thay vì querySelectorAll().
  2. NodeList không là một mảng: NodeList trả về bởi querySelectorAll() không phải là một mảng, nên bạn không thể sử dụng các phương thức của mảng như push() hoặc pop() để thao tác với nó.
  3. Phải chạy trong môi trường browser: querySelectorAll() chỉ hoạt động trong môi trường browser, nên nếu bạn muốn sử dụng nó trong môi trường Node.js, bạn cần sử dụng thư viện hỗ trợ như jsdom.
  4. Cẩn thận với chuỗi selector: Cẩn thận khi truyền vào chuỗi selector, hãy đảm bảo rằng chuỗi selector là chính xác và không có lỗi, nếu không sẽ không tìm thấy phần tử nào hoặc tìm thấy sai phần tử.
  5. Tốn bộ nhớ: Khi tìm kiếm nhiều phần tử, querySelectorAll() có thể tốn nhiều bộ nhớ hơn so với tìm kiếm một phần tử duy nhất. Vì vậy, nếu bạn không cần tìm kiếm tất cả các phần tử, hãy sử dụng querySelector() hoặc sử dụng các phương thức tìm kiếm khác như getElementById() hoặc getElementsByClassName() để giảm tốn bộ nhớ.
  1. Chạy tốt hơn trên các phần tử con: querySelectorAll() chạy tốt hơn khi tìm kiếm trên các phần tử con hơn là trên toàn trang. Nếu bạn cần tìm kiếm trên toàn trang, hãy chọn một phần tử cha rồi tìm kiếm trong phạm vi đó.
  2. Cẩn thận với việc sử dụng querySelectorAll() trong một vòng lặp, do mỗi lần gọi nó sẽ tìm kiếm lại tất cả các phần tử trong trang, nếu không cần thiết thì có thể làm tốn tài nguyên.
  3. Nếu bạn cần tìm kiếm nhiều phần tử có chung một điều kiện, tốt hơn là lưu lại kết quả tìm kiếm đầu tiên và sử dụng nó cho các lần tìm kiếm tiếp theo.

Kết luận 

querySelectorAll() là một phương thức rất mạnh mẽ trong JavaScript cho phép bạn tìm kiếm nhanh chóng và dễ dàng tất cả các phần tử thỏa mãn điều kiện bằng cách sử dụng một chuỗi CSS selector. 

Tuy nhiên, bạn cần chú ý đến những lưu ý khi sử dụng nó, như việc chỉ trả về phần tử đầu tiên, NodeList không là một mảng, phải chạy trong môi trường browser, cẩn thận với chuỗi selector, tốn bộ nhớ và chạy tốt hơn trên các phần tử con.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now