HTML DOM querySelectorAll() মেথড

HTML DOM querySelectorAll() মেথড HTML ডকুমেন্টে তার প্যারামিটারে নির্দিষ্ট CSS সিলেক্টর থেকে মেলে যাওয়া সব এলিমেন্ট রিটার্ন করে।

সিনট্যাক্স

নিচে সিনট্যাক্স দেওয়া হলো:

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() 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>

আউটপুট

এটি নিচের আউটপুট প্রডিউস করবে:

"blue" বাটনে ক্লিক করলে সব প্যারাগ্রাফ এলিমেন্টের স্টাইল পরিবর্তন হবে।