जावास्क्रिप्ट में DOM एलिमेंट के जटिल सेलेक्टर

चलिए कुछ और जटिल करते हैं। उदाहरण के लिए, मान लीजिए कि हमारे पास इस प्रकार का HTML कोड है:

<div id="parent">
	<input>
</div>

चलिए उस इनपुट का लिंक प्राप्त करते हैं, जो ब्लॉक #parent के अंदर स्थित है:

let elem = document.querySelector('#parent input');
console.log(elem);

जैसा कि आप देख रहे हैं, हमने अपना इनपुट सेलेक्टर #parent input के द्वारा प्राप्त कर लिया है। वास्तव में, इस CSS सेलेक्टर के अंतर्गत वे सभी इनपुट आते हैं, जो #parent के अंदर स्थित हैं।

मान लीजिए, उदाहरण के लिए, हमारे पास दो ऐसे इनपुट हैं:

<div id="parent">
	<input value="1">
	<input value="2">
</div>

तब, यदि CSS कोड में सेलेक्टर #parent input लिखा जाए, तो यह हमारे दोनों इनपुट को प्रभावित करेगा:

#parent input {
	color: red;
}

हालाँकि, querySelector विधि ऐसे काम नहीं करती है। यह हमेशा केवल एक एलिमेंट प्राप्त करती है - वह पहला एलिमेंट, जो निर्दिष्ट सेलेक्टर के अनुकूल आता है। चलिए एक उदाहरण से देखते हैं। मान लीजिए हमारे पास elem क्लास वाले इनपुट हैं:

<input class="elem">
<input class="elem">

चलिए इन इनपुट में से पहला इनपुट प्राप्त करते हैं:

let elem = document.querySelector('.elem');
console.log(elem); // यहाँ पहला इनपुट होगा

निम्नलिखित HTML दिया गया है:

<div id="block">
	<p>1</p>
	<p>2</p>
</div>

id, block के बराबर वाले डिव से पहला पैराग्राफ का लिंक प्राप्त करें।

निम्नलिखित HTML दिया गया है:

<div class="block">
	<p>1</p>
	<p>2</p>
</div>

block क्लास वाले डिव से पहला पैराग्राफ का लिंक प्राप्त करें।

निम्नलिखित HTML दिया गया है:

<p class="www">text</p>
<p class="www">text</p>

www क्लास वाले पहले पैराग्राफ का लिंक प्राप्त करें।