एचटीएमएल डोम क्वेरी चयनकर्ता () विधि
तत्व वस्तुउदाहरण
एक <div> तत्व में वर्ग = "उदाहरण" के साथ पहले चाइल्ड एलिमेंट का टेक्स्ट बदलें:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
querySelector () विधि पहला चाइल्ड एलिमेंट लौटाता है जो किसी एलिमेंट के निर्दिष्ट CSS चयनकर्ता से मेल खाता है ।
नोट: क्वेरी चयनकर्ता () विधि केवल पहला तत्व लौटाती है जो निर्दिष्ट चयनकर्ताओं से मेल खाती है। सभी मैचों को वापस करने के लिए, इसके बजाय querySelectorAll() विधि का उपयोग करें।
CSS चयनकर्ताओं के बारे में अधिक जानकारी के लिए, हमारे CSS चयनकर्ता ट्यूटोरियल और हमारे CSS चयनकर्ता संदर्भ पर जाएँ ।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
| Method | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
वाक्य - विन्यास
element.querySelector(CSS selectors)
पैरामीटर मान
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
टेक्निकल डिटेल
| डोम संस्करण: | चयनकर्ता स्तर 1 तत्व वस्तु |
|---|---|
| प्रतिलाभ की मात्रा: | पहला तत्व जो निर्दिष्ट सीएसएस चयनकर्ता से मेल खाता है। यदि कोई मिलान नहीं मिलता है, तो शून्य वापस आ जाता है। यदि निर्दिष्ट चयनकर्ता अमान्य है, तो SYNTAX_ERR अपवाद फेंकता है। |
और ज्यादा उदाहरण
उदाहरण
<div> तत्व में पहले <p> तत्व का टेक्स्ट बदलें:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
उदाहरण
एक <div> तत्व में वर्ग = "उदाहरण" के साथ पहले <p> तत्व का पाठ बदलें:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
उदाहरण
एक <div> तत्व में id="demo" वाले तत्व का टेक्स्ट बदलें:
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
उदाहरण
पहले <a> तत्व में एक लाल बॉर्डर जोड़ें जिसमें <div> तत्व के अंदर लक्ष्य विशेषता हो:
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
उदाहरण
यह उदाहरण दर्शाता है कि एकाधिक चयनकर्ता कैसे कार्य करते हैं।
मान लें कि आपके पास दो तत्व हैं: एक <h2> और एक <h3> तत्व।
निम्न कोड <div> में पहले <h2> तत्व में पृष्ठभूमि रंग जोड़ देगा:
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
हालाँकि, यदि <h3> तत्व को <h2> तत्व से पहले <div> में रखा गया था। <h3> तत्व वह है जो लाल पृष्ठभूमि रंग प्राप्त करेगा।
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस चयनकर्ता
सीएसएस संदर्भ: सीएसएस चयनकर्ता संदर्भ
जावास्क्रिप्ट ट्यूटोरियल: जावास्क्रिप्ट एचटीएमएल डोम नोड सूची
जावास्क्रिप्ट संदर्भ: document.querySelector()
जावास्क्रिप्ट संदर्भ: तत्व .querySelectorAll()
एचटीएमएल डोम संदर्भ: document.querySelectorAll()
तत्व वस्तु