HTML DOM querySelectorAll () विधि
तत्व वस्तुउदाहरण
<div> तत्व के अंदर वर्ग = "उदाहरण" के साथ पहले तत्व का पृष्ठभूमि रंग सेट करें:
// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
querySelectorAll() विधि एक तत्व के बाल तत्वों का संग्रह लौटाती है जो एक निर्दिष्ट सीएसएस चयनकर्ता से मेल खाती है, एक स्थिर नोडलिस्ट ऑब्जेक्ट के रूप में।
NodeList ऑब्जेक्ट नोड्स के संग्रह का प्रतिनिधित्व करता है। नोड्स को इंडेक्स नंबरों द्वारा एक्सेस किया जा सकता है। सूचकांक 0 से शुरू होता है।
युक्ति: आप निर्दिष्ट चयनकर्ता से मेल खाने वाले चाइल्ड नोड्स की संख्या निर्धारित करने के लिए NodeList ऑब्जेक्ट की लंबाई संपत्ति का उपयोग कर सकते हैं, फिर आप सभी नोड्स के माध्यम से लूप कर सकते हैं और अपनी इच्छित जानकारी निकाल सकते हैं।
CSS चयनकर्ताओं के बारे में अधिक जानकारी के लिए, हमारे CSS चयनकर्ता ट्यूटोरियल और हमारे CSS चयनकर्ता संदर्भ पर जाएँ ।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
Method | |||||
---|---|---|---|---|---|
querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
नोट: Internet Explorer 8 में CSS2 चयनकर्ताओं के लिए समर्थन है। IE9 और बाद के संस्करणों में CSS3 के लिए भी समर्थन है।
वाक्य - विन्यास
element.querySelectorAll(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. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
टेक्निकल डिटेल
डोम संस्करण: | चयनकर्ता स्तर 1 दस्तावेज़ वस्तु |
---|---|
प्रतिलाभ की मात्रा: | एक नोडलिस्ट ऑब्जेक्ट, वर्तमान तत्व के सभी वंशज तत्वों का प्रतिनिधित्व करता है जो एक निर्दिष्ट सीएसएस चयनकर्ता से मेल खाता है। NodeList एक स्थिर संग्रह है, जिसका अर्थ है कि DOM में परिवर्तन का संग्रह पर कोई प्रभाव नहीं पड़ता है। नोट: यदि निर्दिष्ट चयनकर्ता अमान्य है तो SYNTAX_ERR अपवाद फेंकता है |
और ज्यादा उदाहरण
उदाहरण
एक <div> तत्व के अंदर सभी <p> तत्व प्राप्त करें, और पहले <p> तत्व का पृष्ठभूमि रंग सेट करें (इंडेक्स 0):
// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";
उदाहरण
वर्ग = "उदाहरण" के साथ <div> में सभी <p> तत्व प्राप्त करें, और पहले <p> तत्व की पृष्ठभूमि सेट करें:
// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");
// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
उदाहरण
पता लगाएं कि कितने तत्व वर्ग = "उदाहरण" के साथ <div> तत्व में हैं (नोडलिस्ट ऑब्जेक्ट की लंबाई संपत्ति का उपयोग करके):
/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;
उदाहरण
<div> तत्व में वर्ग = "उदाहरण" वाले सभी तत्वों का पृष्ठभूमि रंग सेट करें:
// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
उदाहरण
<div> तत्व में सभी <p> तत्वों की पृष्ठभूमि का रंग सेट करें:
// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
उदाहरण
एक "लक्ष्य" विशेषता वाले <div> तत्व में सभी <a> तत्वों की सीमा शैली सेट करें:
// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
उदाहरण
एक <div> तत्व में सभी <h2>, <div> और <span> तत्वों की पृष्ठभूमि का रंग सेट करें:
// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस चयनकर्ता
सीएसएस संदर्भ: सीएसएस चयनकर्ता संदर्भ
जावास्क्रिप्ट ट्यूटोरियल: जावास्क्रिप्ट एचटीएमएल डोम नोड सूची
एचटीएमएल डोम संदर्भ: तत्व । क्वेरी चयनकर्ता ()
एचटीएमएल डोम संदर्भ: document.querySelectorAll()
तत्व वस्तु