Bài viết đăng tại: https://laptrinhcanban.com
Hướng dẫn cách sử dụng querySelectorAll trong JavaScript. Bạn sẽ biết cách sử dụng phương thức querySelectorAll để lấy các element trong DOM thông qua CSS selectors sau bài học này.
querySelectorAll trong JavaScript là gì
querySelectorAll trong JavaScript hay còn gọi là document.querySelectorAll trong JavaScript là một phương thức của Document Object, có tác dụng lấy toàn bộ các element trong DOM thoả mãn quy tắc CSS selectors chỉ định.
Bằng cách chỉ định CSS selectors như đối số trong querySelectorAll , chúng ta có thể lấy các element theo nhiều điều kiện khác nhau với cách viết vô cùng thuận tiện.
- Xem thêm: CSS selectors trong JavaScript
Cú pháp sử dụng phương thức querySelectorAll trong JavaScript như sau:
document.querySelectorAll(selectors)
Trong đó đối số selectors
của phương thức là một giá trị CSS selectors. Phương thức querySelectorAll sẽ trả về một NodeList Object chứa tất cả các element được tìm thấy. Trong trường hợp không tìm thấy element phù hợp thì một NodeList Object trống cũng sẽ được trả về.
NodeList Object là một tập hợp của các Node element trong JavaScript. Trong NodeList Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý tập hợp Node element, ví dụ như là thuộc tính length để tìm số phần tử, hay phương thức item để lấy phần tử từ index của nó chẳng hạn.
Ví dụ cụ thể, chúng ta lấy tất cả các element có classname bằng box
và có tagname bằng p
bằng phương thức querySelectorAll và xử lý NodeList Object được trả về như sau:
let element = document.querySelectorAll('p.box'); |
Mã mẫu
Hãy cùng tìm hiểu cách lấy các phần tử (element) từ trong DOM bằng phương thức querySelectorAll trong ví dụ sau:
|
Trong mã HTML ở trên, chúng ta sẽ lấy element có tagname bằng p
và nằm trong element cha có class="box"
.
Sau khi lấy được Element Object chứa element này, bằng cách dùng vòng lặp để truy cập đến từng element, chúng ta có thể lấy và dùng console để xuất ra màn hình giá trị thuộc tính textContent của element đó.
Và kết quả:
Tổng kết
Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng querySelectorAll trong JavaScript để lấy các element thông qua CSS selectors rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.
Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.
URL Link
HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript