HTML DOM querySelectorAll() Method - सभी मिलते-जुलते एलिमेंट्स चुनें

HTML DOM querySelectorAll() Method

HTML DOM querySelectorAll() method दस्तावेज़ में उन सभी एलिमेंट्स को लौटाता है जो इसके पैरामीटर में निर्दिष्ट CSS सेलेक्टर से मेल खाते हैं। यह एक स्टेटिक NodeList लौटाता है (लाइव नहीं)।

Syntax

document.querySelectorAll("CSS Selector");

उदाहरण

क्लास "para" वाले सभी पैराग्राफ्स का स्टाइल बदलना:

<!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">नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला पैराग्राफ हूँ।</p>
<p class="para">यह एक शानदार पैराग्राफ है।</p>
<p class="para">मैं HTML में एक &lt;p&gt; एलिमेंट हूँ</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>

आउटपुट

प्रारंभ में तीनों पैराग्राफ डिफ़ॉल्ट स्टाइल में दिखते हैं। "सभी पैरा स्टाइल बदलें" बटन क्लिक करने पर सभी पैराग्राफ का रंग लाल और फॉन्ट आकार 1.2rem हो जाता है।

मुख्य बिंदु

• querySelectorAll() सभी मिलते-जुलते एलिमेंट्स का NodeList लौटाता है
• NodeList स्टेटिक होता है (लाइव नहीं) - DOM परिवर्तन इसे प्रभावित नहीं करते
• किसी भी वैध CSS सेलेक्टर का उपयोग कर सकते हैं (क्लास, ID, एट्रिब्यूट, प्सेउडो-क्लास, आदि)
• forEach(), for...of, या इंडेक्स द्वारा NodeList पर पुनरावृति कर सकते हैं
• getElementsByClassName() के विपरीत, यह लाइव HTMLCollection नहीं लौटाता
• पहले मिलते-जुलते एलिमेंट के लिए querySelector() उपयोग करें