HTML DOM Document querySelectorAll() विधि
- पिछला पृष्ठ
- अगला पृष्ठ
- एक पर्याय की ओर वापस जाएं HTML DOM Documents
विन्यास और उपयोग
querySelectorAll() यह मेथड CSS चयनकर्ता से मेल खाने वाले सभी एलीमेंट को वापस देता है。
querySelectorAll() यह मेथड NodeList वापस देता है。
यदि चयनकर्ता अवैध होता है तो, querySelectorAll() यह मेथड फेंसेता है: SYNTAX_ERR असामान्यता。
उदाहरण
उदाहरण 1
सभी class="example" के एलीमेंट को चुनें:
document.querySelectorAll(".example");
उदाहरण 2
पहले <p> एलीमेंट को पृष्ठभूमि रंग जोड़ें:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
उदाहरण 3
पहले class="example" के <p> एलीमेंट को पृष्ठभूमि रंग जोड़ें:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
उदाहरण 4
class="example" के एलीमेंट की संख्या:
let numb = document.querySelectorAll(".example").length;
उदाहरण 5
सभी class="example" के एलीमेंट का पृष्ठभूमि रंग सेट करें:
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
उदाहरण 6
सभी <p> एलिमेंटों के पृष्ठभूमि रंग को सेट करें:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
उदाहरण 7
सभी "target" अभियात्रा वाले <a> एलिमेंटों के बॉर्डर को सेट करें:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
उदाहरण 8
पितृ एलिमेंट <div> के हर <p> एलिमेंट के पृष्ठभूमि रंग को सेट करें:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
उदाहरण 9
सभी <h3>、<div> और <span> एलिमेंटों के पृष्ठभूमि रंग को सेट करें:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
व्याकरण
document.querySelectorAll(CSSselectors)
पारामीटर
| पारामीटर | वर्णन |
|---|---|
| CSSselectors |
आवश्यक। एक या अनेक CSS चयनकर्ता। CSS चयनकर्ता id, क्लास, टाइप, अभियात्रा, अभियात्रा मूल्य आदि के आधार पर HTML एलिमेंट को चुनते हैं。 पूर्ण सूची के लिए हमारे CSS चयनकर्ता संदर्भ पुस्तिका。 अनेक चयनकर्ताओं के लिए, प्रत्येक चयनकर्ता को अलग-अलग कोमा से अलग करें (ऊपरी उदाहरण को देखें)。 |
वापसी मूल्य
| टाइप | वर्णन |
|---|---|
| ऑब्जेक्ट |
सीएसएस चयनक चयनकर्ता से मेल खाने वाले एलिमेंटों का NodeList ऑब्जेक्ट है。 अगर मेल नहीं खोजा जाता है, तो खाली NodeList ऑब्जेक्ट वापस किया जाता है。 |
HTMLCollection और NodeList का अंतर
NodeList और HTMLcollection बहुत से समान हैं।
दोनों दस्तावेज़ से उठाए गए नोड (एलिमेंट) के समान अर्रे जायब (सूची) समूह (सूची) हैं। नोड को इंडेक्स नंबर (उन्नत) से पहुंच सकते हैं। इंडेक्स 0 से शुरू होता है。
दोनों ही length एक विशेषता जो सूची (समूह) में एलिमेंट की संख्या वापस करती है。
HTMLCollection हैदस्तावेज एलीमेंटका समूह
NodeList हैदस्तावेज नोडके समूह (एलीमेंट नोड, गुण नोड और टेक्स्ट नोड)
HTMLCollection प्रोजेक्ट उनके नाम, id या नंबर द्वारा पहुँच सकती है।
NodeList प्रोजेक्ट केवल उनके नंबर द्वारा पहुँच सकती है।
HTMLCollection हमेशासमयका समूह
उदाहरण में: यदि <li> एलीमेंट को DOM में सूची में जोड़ा जाता है, तो HTMLCollection में सूची भी बदलेगी।
NodeList आमतौर परस्थायीका समूह
उदाहरण में: यदि <li> एलीमेंट को DOM में सूची में जोड़ा जाता है, तो NodeList में सूची बदल नहीं होगी।
getElementsByClassName() और getElementsByTagName() विधि सभी वापस NodeList HTMLCollection करती है।
querySelectorAll() विधि स्थायी NodeList वापस करता है।
childNodes प्रयोगकर्ता पुनर्लिखित NodeList वापस करता है।
ब्राउज़र समर्थन
document.querySelectorAll() यह DOM Level 3 (2004) विशेषता है।
सभी ब्राउज़रों में समर्थित है:
| च्रोम | आईई | एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|---|
| च्रोम | आईई | एज | फायरफॉक्स | सफारी | ओपेरा |
| सहायता | 9-11 | सहायता | सहायता | सहायता | सहायता |
संबंधित पृष्ठ
ट्यूटोरियल:
JavaScript NodeList ट्यूटोरियल
QuerySelector विधि:
Element querySelectorAll() विधि
Document querySelectorAll() विधि
GetElement विधि:
Document getElementById() विधि
- पिछला पृष्ठ
- अगला पृष्ठ
- एक पर्याय की ओर वापस जाएं HTML DOM Documents
