एचटीएमएल डोम दस्तावेज़ क्वेरी चयनकर्ता ()
उदाहरण
पहला <p> तत्व प्राप्त करें:
document.querySelector("p");
वर्ग = "उदाहरण" के साथ पहला तत्व प्राप्त करें:
document.querySelector(".example");
नीचे और अधिक उदाहरण।
परिभाषा और उपयोग
यह querySelector()
विधि सीएसएस चयनकर्ता से मेल खाने वाला पहला तत्व लौटाती है।
सभी मैचों (न केवल पहले) को वापस करने के लिए, querySelectorAll()
इसके बजाय का उपयोग करें।
दोनों querySelector()
और querySelectorAll()
एक NodeList लौटाएं ।
यदि चयनकर्ता अमान्य है तो दोनों querySelector()
और querySelectorAll()
एक SYNTAX_ERR अपवाद फेंक दें।
ट्यूटोरियल:
जावास्क्रिप्ट नोड सूची ट्यूटोरियल
क्वेरी चयनकर्ता तरीके:
तत्व क्वेरी चयनकर्ता सभी () विधि
दस्तावेज़ क्वेरी चयनकर्ता () विधि
दस्तावेज़ क्वेरी चयनकर्ता सभी () विधि
गेट एलिमेंट तरीके:
दस्तावेज़ getElementById () विधि
HTML DOM NodeList / HTMLCollection
एक HTMLCollection और एक NodeList के बीच अंतर
एक NodeList और एक HTMLCollection दोनों एक दस्तावेज़ से निकाले गए नोड्स (तत्वों) के सरणी-समान संग्रह (सूचियाँ) हैं। नोड्स को इंडेक्स नंबरों द्वारा एक्सेस किया जा सकता है। सूचकांक 0 से शुरू होता है।
दोनों वस्तुओं में एक लंबाई संपत्ति होती है जो सूची में तत्वों की संख्या लौटाती है।
एक HTMLCollection एक लाइव संग्रह है : यदि आप DOM में किसी सूची में <li> तत्व जोड़ते हैं, तो HTMLCollection में सूची भी बदल जाएगी।
एक NodeList एक स्थिर संग्रह है : यदि आप DOM में किसी सूची में <li> तत्व जोड़ते हैं, तो NodeList में सूची नहीं बदलेगी।
और
विधियां एक HTMLCollection लौटाती हैं getElementsByClassName()
।getElementsByTagName()
और
विधियां एक नोडलिस्ट लौटाती हैं querySelector()
।querySelectorAll()
वाक्य - विन्यास
document.querySelector(CSS selectors)
मापदंडों
Parameter | Description |
CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
प्रतिलाभ की मात्रा
प्रकार | विवरण |
वस्तु | पहले तत्व के साथ एक नोडलिस्ट जो सीएसएस चयनकर्ता से मेल खाता है। यदि कोई मिलान नहीं मिलता है, null तो वापस कर दिया जाता है। |
और ज्यादा उदाहरण
वर्ग = "उदाहरण" के साथ पहला <p> तत्व प्राप्त करें:
document.querySelector("p.example");
आईडी = "डेमो" के साथ तत्व का टेक्स्ट बदलें:
document.querySelector("#demo").innerHTML = "Hello World!";
माता-पिता के साथ पहले <p> तत्व का चयन करें <div> तत्व है।
document.querySelector("div > p");
"लक्ष्य" विशेषता वाले पहले <a> तत्व का चयन करें:
document.querySelector("a[target]");
पहले <h3> या पहले <h4> को चुनें:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
पहले <h3> या पहले <h4> को चुनें:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
ब्राउज़र समर्थन
document.querySelector()
एक डोम लेवल 1 (1998) फीचर है।
यह सभी ब्राउज़रों में पूरी तरह से समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |