เมธอด querySelectorAll() ของ HTML DOM

เมธอด querySelectorAll() ของ HTML DOM ใช้คืนค่าองค์ประกอบทั้งหมดที่ตรงกับ CSS selector ที่ระบุในพารามิเตอร์ในเอกสาร HTML

รูปแบบไวยากรณ์ (Syntax)

document.querySelectorAll(“CSS Selector”);

ตัวอย่าง

ตัวอย่างการใช้งานเมธอด 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()</h1> <p class="para">สวัสดีครับ! ผมเป็นย่อหน้าที่มีข้อความสุ่ม</p> <p class="para">นี่คือย่อหน้าที่ยอดเยี่ยม</p> <p class="para">ผมคือองค์ประกอบ &lt;p&gt; ใน HTML</p> <button onclick="changeColor()" class="btn">เปลี่ยนสไตล์ทุกย่อหน้า</button> <script>    function changeColor() {       var paraElements = document.querySelectorAll(".para");       paraElements.forEach((paraElement)=>{          paraElement.style.color="#db133a";          paraElement.style.fontSize="1.2rem";       });    } </script> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:

คลิกปุ่ม 「สีน้ำเงิน」 เพื่อเปลี่ยนสไตล์ของทุกองค์ประกอบย่อหน้า