Phương thức querySelectorAll là một trong những phương thức quan trọng trong JavaScript, giúp bạn tìm kiếm và chọn các phần tử HTML trên trang web. Với phương thức này, bạn có thể tìm kiếm các phần tử dựa trên các Selector CSS, thuộc tính khác của phần tử HTML hoặc kết hợp cả hai.
Phương thức querySelectorAll trả về một mảng chứa tất cả các phần tử HTML phù hợp với Selector được chỉ định. Nó cho phép bạn thực hiện các thao tác trên nhiều phần tử HTML một cách hiệu quả mà không cần phải lặp lại cùng một mã lệnh nhiều lần.
Một trong những điểm mạnh của phương thức querySelectorAll là nó được hỗ trợ trên tất cả các trình duyệt hiện đại. Nó cũng cho phép bạn tìm kiếm các phần tử HTML động, có nghĩa là các phần tử được tạo ra bởi JavaScript sau khi trang web được tải.
Cú pháp method querySelectorAll
elementList = parentNode.querySelectorAll(selectors);
Trong đó:
parentNode: là đối tượng cha của các phần tử cần tìm kiếm. Phương thứcquerySelectorAllsẽ tìm kiếm các phần tử con của đối tượng cha này mà phù hợp với Selector được chỉ định. Nếu muốn tìm kiếm trên toàn bộ trang web, ta có thể sử dụng đối tượngdocumentlàm đối tượng cha.selectors: là chuỗi Selector CSS được sử dụng để tìm kiếm các phần tử HTML.
Phương thức querySelectorAll trả về một danh sách các phần tử con của đối tượng cha phù hợp với Selector được chỉ định, được lưu trữ trong một đối tượng NodeList. Đối tượng NodeList tương tự như một mảng, cho phép ta truy cập các phần tử bằng chỉ số hoặc sử dụng các phương thức của mảng như forEach(), map(),…
Ví dụ về method querySelectorAll
HTML:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="circle">Circle 1</div>
<div class="circle">Circle 2</div>
</div>
JavaScript
const container = document.querySelector('.container');
const boxes = container.querySelectorAll('.box');
const circles = container.querySelectorAll('.circle');
console.log(boxes.length); // Output: 3
console.log(circles.length); // Output: 2
Trong ví dụ trên, phương thức querySelectorAll được sử dụng để tìm tất cả các phần tử có class là “box” và “circle” trong đối tượng có class là “container”. Kết quả tìm kiếm được lưu trữ trong các biến boxes và circles, và ta có thể truy cập các phần tử tìm được thông qua đối tượng NodeList.
Tính tương thích trình duyệt
| Tính năng | Chrome | Firefox | Safari | Edge | IE | Opera |
|---|---|---|---|---|---|---|
| querySelectorAll | 1.0 | 3.5 | 3.1 | 12 | 8.0 | 10.0 |
| Element.querySelectorAll | 4.0 | 3.5 | 3.1 | 12 | 8.0 | 10.0 |
Chú thích:
querySelectorAll: Phương thứcquerySelectorAllđược hỗ trợ từ phiên bản Chrome 1.0, Firefox 3.5, Safari 3.1, Edge 12 và IE 8.0.Element.querySelectorAll: Phương thứcquerySelectorAllđược hỗ trợ trên đối tượngElementtừ phiên bản Chrome 4.0, Firefox 3.5, Safari 3.1, Edge 12 và IE 8.0.
Tương thích trình duyệt của phương thức querySelectorAll là khá tốt và được hỗ trợ trên hầu hết các trình duyệt phổ biến hiện nay. Tuy nhiên, cần lưu ý rằng phiên bản trình duyệt cũ hơn có thể không hỗ trợ hoặc hỗ trợ hạn chế cho phương thức này. Do đó, khi phát triển trang web, cần kiểm tra tương thích trình duyệt của các tính năng sử dụng phương thức querySelectorAll để đảm bảo hoạt động chính xác trên mọi trình duyệt.
Kết luận và bài viết có liên quan
querySelectorAll là một công cụ hữu ích để lựa chọn các phần tử HTML trên trang web. Nó cho phép lựa chọn các phần tử dựa trên tên thẻ, lớp, id, hoặc các thuộc tính khác, và trả về một danh sách các phần tử thỏa mãn điều kiện lựa chọn đó.
Tương thích trình duyệt của phương thức querySelectorAll là khá tốt và được hỗ trợ trên hầu hết các trình duyệt phổ biến hiện nay. Tuy nhiên, cần lưu ý rằng phiên bản trình duyệt cũ hơn có thể không hỗ trợ hoặc hỗ trợ hạn chế cho phương thức này. Do đó, khi phát triển trang web, cần kiểm tra tương thích trình duyệt của các tính năng sử dụng phương thức querySelectorAll để đảm bảo hoạt động chính xác trên mọi trình duyệt.
Việc sử dụng phương thức querySelectorAll kết hợp với CSS Selector sẽ giúp cho việc lựa chọn phần tử trên trang web trở nên dễ dàng và linh hoạt hơn. Nó cũng là một công cụ hữu ích trong việc tìm kiếm, thêm hoặc xóa các phần tử HTML trong JavaScript.
Bài viết có liên quan:
