HTML DOM querySelector() Method

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

Syntax

document.querySelector("CSS Selector");

उदाहरण

क्लास "awesome-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 querySelector() Method Demo</h1>
<p class="awesome-para">नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला पैराग्राफ हूँ।</p>
<button onclick="changeColor()" class="btn">पैराग्राफ स्टाइल बदलें</button>
<script>
  function changeColor() {
    var paraElement = document.querySelector(".awesome-para");
    paraElement.style.color = "#db133a";
    paraElement.style.fontSize = "1.2rem";
  }
</script>
</body>
</html>

आउटपुट

"पैराग्राफ स्टाइल बदलें" बटन क्लिक करने पर पहला (और इस मामले में एकमात्र) ".awesome-para" पैराग्राफ का रंग लाल और फॉन्ट आकार 1.2rem हो जाता है।

मुख्य बिंदु

querySelector() केवल पहला मिलता-जुलता एलिमेंट लौटाता है
कोई मेल न मिलने पर null लौटाता है - उपयोग से पहले जांच लें
किसी भी वैध CSS सेलेक्टर का उपयोग कर सकते हैं
ID सेलेक्टर (#id) के लिए getElementById() तेज होता है
सभी मिलते-जुलते एलिमेंट्स के लिए querySelectorAll() उपयोग करें
आधुनिक वेब विकास में एलिमेंट चयन की पसंदीदा विधि है