Truy vấn HTML DOM Phương thứcSelectorAll ()

Phương thức HTML DOM querySelectorAll () 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

Sau đây là cú pháp -

document.querySelectorAll(“CSS Selector”);

Ví dụ

Hãy để chúng tôi xem một 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>DOM querySelectorAll() Method Demo</h1>
<p class="para">Hi! I'm a paragraph with some random text.</p>
<p class="para">This is a awesome paragraph.</p>
<p class="para">I'm a &lt;p&gt; element in HTML</p>
<button onclick="changeColor()" class="btn">Change all para styles</button>
<script>
   function changeColor() {
      var paraElements = document.querySelectorAll(".para");
      paraElements.forEach((paraElement)=>{
         paraElement.style.color="#db133a";
         paraElement.style.fontSize="1.2rem";
      });
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Truy vấn HTML DOM Phương thứcSelectorAll ()

Nhấp vào “ xanh lam ”Để thay đổi kiểu của tất cả các phần tử đoạn văn.

Truy vấn HTML DOM Phương thứcSelectorAll ()