HTML DOM Element querySelector() विधि

वर्णन और उपयोग

querySelector() विधि एलीमेंट के निर्दिष्ट CSS चयनक के समर्थ पहले उप-एलीमेंट वापस करता है。

ध्यान:

querySelector() विधि केवल निर्दिष्ट चयनक के समर्थ एलीमेंट वापस करता है। सभी मेल एलीमेंट वापस करने के लिए, इसके बजाय querySelectorAll() विधि.

और देखें:

संदर्भ मानवाकार:

classList गुण

className गुण

querySelectorAll() विधि

getElementsByTagName() विधि

getElementsByClassName() विधि

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

शिक्षा:

CSS व्याकरण

CSS चयनक

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

उदाहरण

उदाहरण 1

बदलें <div> एलीमेंट में class="example" के पहले उप-एलीमेंट का टेक्स्ट:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

आप खुद से प्रयास करें

पाने के नीचे और अधिक उदाहरण मिलेंगे。

व्याकरण

element.querySelector(CSSselectors)

पारामीटर

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

आवश्यक. शब्द. एक या अनेक CSS चयनक संयोजन को निर्दिष्ट करने के लिए。

CSS चयनक HTML एलीमेंट को id, class, प्रकार, गुण, गुण मान आदि के आधार पर चुनते हैं。

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

वापसी एलीमेंट दस्तावेज़ में पहले पाए गए एलीमेंट पर निर्भर करता है (देखें नीचे "और अधिक उदाहरण")。

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

तकनीकी विस्तार

वापसी मान:

निर्दिष्ट CSS चयनक के पहले एलीमेंट को मेल खाना。

यदि कोई मेल नहीं मिला, तो null वापस करें。

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

और अधिक उदाहरण

उदाहरण 2

बदलें <div> एलीमेंट में पहले <p> एलीमेंट का टेक्स्ट:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

आप खुद से प्रयास करें

उदाहरण 3

बदलें <div> एलीमेंट में class="example" के पहले <p> एलीमेंट का टेक्स्ट:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

आप खुद से प्रयास करें

उदाहरण 4

बदलें <div> एलीमेंट में id="demo" के एलीमेंट का टेक्स्ट:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

आप खुद से प्रयास करें

उदाहरण 5

<div> एलीमेंट के अंदर target गुण के पहले <a> एलीमेंट को लाल किनारा जोड़ेगा:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

आप खुद से प्रयास करें

उदाहरण 6

यह उदाहरण कई चयनकर्ताओं के काम कैसे करते है, दिखाता है।

यदि आपके पास दो एलीमेंट हैं: <h2> और <h3> एलीमेंट

नीचे दिए गए कोड <div> में पहले <h2> एलीमेंट को पृष्ठभूमि रंग जोड़ेगा:

<div id="myDIV">
  <h2>एक h2 एलीमेंट</h2>
  <h3>एक h3 एलीमेंट</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

आप खुद से प्रयास करें

उदाहरण 7

लेकिन, अगर <div> में <h3> एलीमेंट <h2> एलीमेंट के पहले है, तो <h3> एलीमेंट को लाल पृष्ठभूमि रंग मिलेगा।

<div id="myDIV">
  <h3>एक h3 एलीमेंट</h3>
  <h2>एक h2 एलीमेंट</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

आप खुद से प्रयास करें

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

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

च्रोम एज फायरफॉक्स सफारी ओपेरा
च्रोम एज फायरफॉक्स सफारी ओपेरा
4.0 8.0 3.5 3.2 10.0

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

CSS ट्यूटोरियलःCSS चयनक

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

जावास्क्रिप्ट ट्यूटोरियलःजावास्क्रिप्ट HTML DOM Node List

जावास्क्रिप्ट संदर्भ दस्तावेज़ःdocument.querySelector()

जावास्क्रिप्ट संदर्भ दस्तावेज़ःelement.querySelectorAll()

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