DOM तत्वों से डेटा प्राप्त करना JavaScript में

डिस्ट्रक्चरिंग हमें DOM के टेक्स्ट और एट्रिब्यूट वैल्यूज सीधे लूप में प्राप्त करने की अनुमति देती है। आइए समझते हैं कि यह कैसे काम करता है। मान लीजिए कि हमारे पास निम्नलिखित पैराग्राफ हैं:

<p id="id1">text1</p>
<p id="id2">text2</p>
<p id="id3">text3</p>

आइए इन पैराग्राफों का संग्रह एक वेरिएबल में प्राप्त करें:

let elems = document.querySelectorAll('p');

आइए एलिमेंट्स को एक लूप के साथ पुनरावृत्त करें, उनकी संख्याओं और स्वयं एलिमेंट्स को अलग करते हुए:

for (let [key, elem] of elems.entries()) {
	console.log(key, elem);
}

और अब आइए एलिमेंट्स का डिस्ट्रक्चरिंग करें, उनसे उनका id और टेक्स्ट प्राप्त करते हुए:

for (let [key, {id, textContent}] of elems.entries()){
	console.log(key, id, textContent);
}

निम्नलिखित कोड दिया गया है:

<input id="id1" value="111">
<input id="id2" value="222">
<input id="id3" value="333">

इनपुट्स की संख्याएं, id और value प्राप्त करें।