एचटीएमएल डोम दस्तावेज़ क्वेरी चयनकर्ता सभी ()
उदाहरण
वर्ग = "उदाहरण" के साथ सभी तत्वों का चयन करें:
document.querySelectorAll(".example");
नीचे और अधिक उदाहरण।
परिभाषा और उपयोग
यह querySelectorAll()
विधि उन सभी तत्वों को लौटाती है जो एक सीएसएस चयनकर्ता से मेल खाते हैं।
querySelectorAll()
विधि एक NodeList देता है ।
यदि 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.querySelectorAll(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> तत्व में पृष्ठभूमि का रंग जोड़ें:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
कक्षा = "उदाहरण" के साथ पहले <p> तत्व में पृष्ठभूमि रंग जोड़ें:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
वर्ग के साथ तत्वों की संख्या = "उदाहरण":
let numb = document.querySelectorAll(".example").length;
वर्ग = "उदाहरण" के साथ सभी तत्वों की पृष्ठभूमि का रंग सेट करें:
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
सभी <p> तत्वों की पृष्ठभूमि का रंग सेट करें:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
"लक्ष्य" विशेषता वाले सभी <a> तत्वों की सीमा निर्धारित करें:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
प्रत्येक <p> तत्व का पृष्ठभूमि रंग सेट करें जहां माता-पिता एक <div> तत्व है:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
सभी <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()
एक डोम लेवल 3 (2004) फीचर है।
यह सभी ब्राउज़रों में पूरी तरह से समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |