querySelectorAll

Bài học 9 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Hàm querySelectorAll() trả về một tập hợp gồm tất cả phần tử khớp với bộ chọn tương tự CSS, tương tự như querySelector nhưng cho phép bạn lấy tất cả phần tử khớp cùng một lúc.

const elements = document.querySelectorAll(".other");

Đoạn code trên lấy tất cả phần tử có tên lớp là other.

Thử thách

Dễ

Bạn được cung cấp đoạn code HTML có hai thẻ span.

Chỉ dùng JavaScript, hãy thay đổi kiểu của tất cả phần tử bằng hàm (function) querySelectorAll:

backgroundColor thành "pink"
border thành "1px solid red"

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <span class="error">Error 1</span>
        <span class="error">Error 2</span>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementById Chỉnh sửa kiểu dáng phần tử getElementsByClassName Duyệt qua và thao tác getElementsByTagName querySelector

3Các phương thức DOM II

querySelectorAlladdEventListener innerHTML createElement và appendChild Chuyển đổi classList

Tự luyện tập: Playground Web