HTML DOM Element querySelectorAll() विधि

विवरण और उपयोग

querySelectorAll() विधि निर्दिष्ट CSS चयनक से मेल खाते एलीमेंट के उप-एलीमेंट्स के संग्रह को वापस करता है, जो स्थायी NodeList ऑब्जैक्ट है।

NodeList

NodeList एक किस्म की नोड संग्रह (लिस्ट) है।

लिस्ट में के नोड्स को इंडेक्स (उदाहरण) के द्वारा अभिगमित किया जा सकता है। इंडेक्स 0 से शुरू होता है。

length गुण लिस्ट में के नोड्स की संख्या को वापस करता है。

अन्य देखें:

संदर्भ पुस्तिका:

classList गुण

className गुण

querySelector() विधि

getElementsByTagName() विधि

getElementsByClassName() विधि

एचटीएमएल डॉम स्टाइल ऑब्जैक्ट

शिक्षा:

CSS ग्राफिक्स

CSS चयनक

CSS चयनक संदर्भ पुस्तक

उदाहरण

उदाहरण 1

डिव एलीमेंट में class="example" के पहले एलीमेंट के पृष्ठभूमि रंग को सेट करें:

// id="myDIV" के एलीमेंट (डिव) को प्राप्त करें, फिर div में class="example" के सभी एलीमेंट्स को प्राप्त करें
वार x = document.getElementById("myDIV").querySelectorAll(".example"); 
// div में पहले class="example" (इंडेक्स 0) एलीमेंट के पृष्ठभूमि रंग को सेट करें
x[0].style.backgroundColor = "red";

स्वयं प्रयोग कीजिए

सूचना:पृष्ठ के नीचे अधिक उदाहरण मिलेंगे。

व्याकरण

element.querySelectorAll(cssSelectors)

पारामीटर

पारामीटर वर्णन
cssSelectors

अनिवार्य। शब्द-गण। एक या अनेक CSS चयनक्स को निर्दिष्ट करने के लिए इस्तेमाल किया जाता है。

CSS चयनक एचटीएमएल एलीमेंट्स को आधारित id, class, प्रकार, अभियान, अभियान मूल्य आदि के आधार पर चयन करते हैं。

अनेक चयनक्स के लिए, प्रत्येक चयनक को एक बार आगे की बारी में सेपरेट करें

सूचना:सभी CSS चयनक्स की सूची के लिए हमारे CSS चयनक संदर्भ पुस्तक।

तकनीकी विवरण

वापसी मूल्य:

NodeList एलीमेंट, वर्तमान एलीमेंट के सभी पीछे के एलीमेंट्स को प्रस्तुत करता है जो निर्दिष्ट CSS चयनक से मेल खाते हैं。

NodeList एक स्थायी संग्रह है, यानी DOM में किसी भी परिवर्तन संग्रह पर कोई प्रभाव नहीं पड़ता।

ध्यान देंःयदि निर्दिष्ट चयनक अवैध है, तो SYNTAX_ERR अपवाद फेंकें
DOM संस्करण: Selectors Level 1 Document Object

अधिक उदाहरण

उदाहरण 2

डिव एलीमेंट के अंदर सभी <p> एलीमेंट्स को प्राप्त करें, और पहले <p> एलीमेंट (इंडेक्स 0) के पृष्ठभूमि रंग को सेट करें:

// आयीडी="myDIV" के एलिमेंट (div) प्राप्त करें और फिर div के अंदर सभी p एलिमेंट प्राप्त करें
वार x = document.getElementById("myDIV").querySelectorAll("p"); 
// div में पहले <p> एलीमेंट (इंडेक्स 0) के पृष्ठभूमि रंग को सेट करें
x[0].style.backgroundColor = "red";

स्वयं प्रयोग कीजिए

उदाहरण 3

获取 <div> में class="example" के सभी <p> एलीमेंट्स, और पहले <p> एलीमेंट के पृष्ठभूमि को सेट करें:

// आयीडी="myDIV" के एलिमेंट (div) प्राप्त करें और फिर div में class="example" वाले सभी p एलिमेंट प्राप्त करें
वार x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// div में class="example" वाले पहले <p> एलिमेंट (इंडेक्स 0) का पृष्ठभूमि रंग सेट करें
x[0].style.backgroundColor = "red";

स्वयं प्रयोग कीजिए

उदाहरण 4

डिव एलिमेंट में कितने class="example" वाले एलिमेंट हैं (NodeList ऑब्जैक्ट के length एट्रिब्यूट का उपयोग करते हुए):

/* आयीडी="myDIV" के एलिमेंट (div) प्राप्त करें और फिर div के अंदर class="example" वाले सभी p एलिमेंट प्राप्त करें, पाये गए एलिमेंट की संख्या बढ़ाएं */
वार x = document.getElementById("myDIV").querySelectorAll(".example").length;

स्वयं प्रयोग कीजिए

उदाहरण 5

डिव एलिमेंट में class="example" के सभी एलिमेंट के पृष्ठभूमि रंग सेट करें:

// आयीडी="myDIV" के एलिमेंट (div) प्राप्त करें और फिर div में class="example" वाले सभी एलिमेंट प्राप्त करें
वार x = document.getElementById("myDIV").querySelectorAll(".example");
// for लूप बनाएं और div में सभी class="example" एलिमेंट के पृष्ठभूमि रंग सेट करें
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

स्वयं प्रयोग कीजिए

उदाहरण 6

डिव एलिमेंट में सभी <p> एलिमेंट के पृष्ठभूमि रंग सेट करें:

// आयीडी="myDIV" के एलिमेंट (div) प्राप्त करें और फिर div के अंदर सभी p एलिमेंट प्राप्त करें
वार x = document.getElementById("myDIV").querySelectorAll("p");
// for लूप बनाएं और div में सभी p एलिमेंट के पृष्ठभूमि रंग सेट करें
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

स्वयं प्रयोग कीजिए

उदाहरण 7

डिव एलिमेंट में सभी target एट्रिब्यूट वाले <a> एलिमेंट के किनारा शैली सेट करें:

// आयीडी="myDIV" के एलिमेंट (div) प्राप्त करें और फिर div में सभी target एट्रिब्यूट वाले <a> एलिमेंट प्राप्त करें
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for चक्र बनाएँ और div में सभी टारगेट अट्रिब्यूट के <a> एलिमेंटों के बॉर्डर सेट करें
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

स्वयं प्रयोग कीजिए

उदाहरण 8

सेट <div> एलिमेंट में सभी <h2>、<div> और <span> एलिमेंटों के पृष्ठभूमि रंगः

// id="myDIV" के एलिमेंट को प्राप्त करें (div) और <div> के भीतर सभी <h2>、<div> और <span> एलिमेंटों को प्राप्त करें
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for चक्र बनाएँ और <div> में सभी <h2>、<div> और <span> एलिमेंटों के पृष्ठभूमि रंग सेट करें
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

स्वयं प्रयोग कीजिए

ब्राउज़र समर्थन

तालिका में उल्लिखित संख्याएं पहली पूर्णता के साथ इस विधि का समर्थन करने वाले ब्राउज़र का संस्करण को निर्दिष्ट करती हैं।

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

ध्यान देंःInternet Explorer 8 CSS2 चयनकर्ता का समर्थन करता है। IE9 और अधिक वर्जन CSS3 का समर्थन करते हैं।

संबंधित पृष्ठ

CSS शिक्षाःCSS चयनक

CSS संदर्भ दस्तावेज़ःCSS चयनक संदर्भ पुस्तक

JavaScript शिक्षाःJavaScript HTML DOM Node List

JavaScript संदर्भ दस्तावेज़ःelement.querySelector()

HTML DOM संदर्भ दस्तावेज़ःdocument.querySelectorAll()