Phương thức querySelectorAll() trong HTML DOM

Phương thức querySelectorAll() của HTML DOM trả về tất cả các phần tử khớp với một bộ chọn CSS cụ thể được chỉ định trong tham số của nó trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

document.querySelectorAll(“CSS Selector”);

Ví dụ

Dưới đây là ví dụ về phương thức querySelectorAll():

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    .drop-down{       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:8px;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       font-weight:bold;    } </style> </head> <body> <h1>Demo phương thức querySelectorAll() của DOM</h1> <p class="para">Xin chào! Tôi là một đoạn văn với một số văn bản ngẫu nhiên.</p> <p class="para">Đây là một đoạn văn tuyệt vời.</p> <p class="para">Tôi là một phần tử &lt;p&gt; trong HTML</p> <button onclick="changeColor()" class="btn">Thay đổi style tất cả para</button> <script>    function changeColor() {       var paraElements = document.querySelectorAll(".para");       paraElements.forEach((paraElement)=>{          paraElement.style.color="#db133a";          paraElement.style.fontSize="1.2rem";       });    } </script> </body> </html>

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

Nhấn vào nút 「xanh」 để thay đổi style của tất cả các phần tử đoạn văn.