HTML DOM Document querySelector() विधि
- पिछला पृष्ठ open()
- अगला पृष्ठ querySelectorAll()
- एक स्तर ऊपर HTML DOM Documents
रोजी और उपयोग
querySelector() फ़ंक्शन CSS चयनकर्ता से मेल खाते हुए एलिमेंट वापस करता हैपहलाएलिमेंट
यदि आप वापसी एलिमेंट चाहते हैंसभीमेल खाते हुए एलिमेंट (केवल पहले मेल खाते हुए एलिमेंट नहीं), querySelectorAll() का उपयोग करें。
यदि चयनकर्ता अवैध है, तो querySelector() और querySelectorAll() दोनों फेंक्शन SYNTAX_ERR अपवाद।
उदाहरण
उदाहरण 1
पहले <p> एलिमेंट प्राप्त करें:
document.querySelector("p");
उदाहरण 2
class="example" के पहले एलिमेंट प्राप्त करें:
document.querySelector(".example");
उदाहरण 3
class="example" के पहले <p> एलिमेंट प्राप्त करें:
document.querySelector("p.example");
उदाहरण 4
id="demo" के एलिमेंट के टेक्स्ट को बदलें:
document.querySelector("#demo").innerHTML = "Hello World!";
उदाहरण 5
पहले अपने पिता एलिमेंट <div> के <p> एलिमेंट को चुनें:
document.querySelector("div > p");
उदाहरण 6
पहले "target" गुण वाले <a> एलिमेंट को चुनें:
document.querySelector("a[target]");
उदाहरण 7
पहले <h3> या पहले <h4> को चुनें:
<h3>एक h3 एलिमेंट</h3>
<h4>एक h4 एलिमेंट</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
उदाहरण 8
पहले <h3> या पहले <h4> को चुनें:
<h4>एक h4 एलिमेंट</h4>
<h3>एक h3 एलिमेंट</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
व्याकरण
document.querySelector(cssSelectors)
पारामीटर
| पारामीटर | वर्णन |
|---|---|
| cssSelectors |
अनिवार्य। एक या अनेक CSS चयनकर्ता。 CSS चयनकर्ता id, क्लास, टाइप, गुण, गुण मूल्य आदि के आधार पर HTML एलिमेंट को चुनते हैं。 पूर्ण सूची प्राप्त करने के लिए हमारे CSS चयनकर्ता संदर्भ पुस्तिका。 अनेक चयनकर्ताओं के लिए, प्रत्येक चयनकर्ता को कमा से अलग करें (देखें पृष्ठ के ऊपरी उदाहरण)。 |
वापसी मूल्य
| टाइप | वर्णन |
|---|---|
| वस्तु |
CSS चयनकर्ता से मेल खाते पहले एलिमेंट के NodeList。 यदि मेल नहीं होता है, तो null वापस करेगा。 |
HTMLCollection और NodeList का अंतर
NodeList और HTMLcollection बहुत ज़्यादा समान
दोनों दस्तावेज से निकाले गए नोड (एलीमेंट) के समान सूचकांक के समूह (सूची) हैं। नोड को सूचकांक से पहुंचा जा सकता है। सूचकांक 0 से शुरू होता है।
दोनों का length गुण, यह लिस्ट (समूह) में एलीमेंट की संख्या वापस देता है।
HTMLCollectionदस्तावेज एलीमेंटका समूह
NodeListदस्तावेज नोड（एलीमेंट नोड, गुण नोड और टेक्स्ट नोड）का समूह
HTMLCollection एलीमेंट को उनके नाम, id या सूचकांक से पहुंचा जा सकते हैं।
NodeList एलीमेंट केवल उनके सूचकांक से पहुंचा जा सकते हैं।
HTMLCollection हमेशासमयान्तरका समूह
उदाहरण: यदि <li> एलीमेंट को DOM में सूची में जोड़ा जाता है, तो HTMLCollection में सूची भी बदल जाती है।
NodeList आमतौर परस्थिरका समूह
उदाहरण: यदि <li> एलीमेंट को DOM में सूची में जोड़ा जाता है, तो NodeList में सूची बदल नहीं जाती।
getElementsByClassName() और getElementsByTagName() विधियाँ सभी NodeList देती हैं।
querySelectorAll() विधि स्थिर NodeList देती है।
childNodes प्रयोगता वापस NodeList देती है।
ब्राउज़र समर्थन
document.querySelector() यह DOM Level 1 (1998) विशेषता है।
सभी ब्राउज़र इसे समर्थित करते हैं:
| च्रोम | आईई | एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|---|
| च्रोम | आईई | एज | फायरफॉक्स | सफारी | ओपेरा |
| समर्थन | 9-11 | समर्थन | समर्थन | समर्थन | समर्थन |
- पिछला पृष्ठ open()
- अगला पृष्ठ querySelectorAll()
- एक स्तर ऊपर HTML DOM Documents
