LWC - QuerySelector()

سوال سلیکٹر()

بنیادی طور پر، querySelector() کو 'this.template' کے ساتھ استعمال کیا جاتا ہے جو کسی خاص ٹیمپلیٹ میں موجود عناصر کو حاصل کرتا ہے۔ اگر متعدد عناصر ہیں، تو یہ صرف پہلے عنصر پر غور کرے گا۔ اگر مخصوص عنصر ٹیمپلیٹ میں موجود نہیں ہے تو Null واپس کر دیا جاتا ہے۔ یہ سلیکٹر کو پیرامیٹر کے طور پر لیتا ہے۔ یہ کلاس نام کا ٹیگ ہو سکتا ہے۔ ID کو تعاون نہیں کیا جائے گا۔ کچھ معاملات میں، آپ کی کلاسیں ایک جیسی ہیں لیکن قدریں مختلف ہیں۔ اس منظر نامے میں، ہمیں ڈیٹا recid استعمال کرنے کی ضرورت ہے جو قدر کی بنیاد پر عناصر حاصل کرتا ہے۔

نحو:

آئیے دیکھتے ہیں کہ querySelector() کے اندر سلیکٹر کی وضاحت کیسے کی جائے۔

1. this.template.querySelector(سلیکٹر)
2. this.template.querySelector('[data-recid='value']')

مثال کے طور پر: اگر سلیکٹر h1 ٹیگ ہے، تو آپ کو اسے 'h1' کے طور پر بتانا چاہیے۔

1. تمام مثالیں اس 'meta.xml' فائل کو استعمال کرتی ہیں۔ ہم ہر ایک مثال میں اس کی وضاحت نہیں کریں گے۔ LWC اجزاء کو آپ کے ریکارڈ پیج، ایپ پیج، یا ہوم پیج میں شامل کیا جا سکتا ہے۔

2. ان تمام مثالوں میں جن پر ہم اس گائیڈ میں بحث کرنے جا رہے ہیں، Logic کو 'js' کوڈ کے طور پر فراہم کیا گیا ہے۔ اس کے بعد، ہم اسکرین شاٹ کی وضاحت کرتے ہیں جس میں پورا 'js' کوڈ شامل ہے۔

مثال 1:

سب سے پہلے، ہم HTML فائل میں کچھ متن کے ساتھ h1، div، span، اور بجلی کے بٹن کے ٹیگ بناتے ہیں۔ اس کے علاوہ، ہم ایک بٹن بناتے ہیں جس پر کلک کرنے پر پچھلے عناصر مل جاتے ہیں۔ 'js' فائل میں، ہم اس.template.querySelector() کے ذریعے ان چاروں عناصر کا اندرونی متن واپس کرتے ہیں۔

firstExample.html

firstExample.js

پورا کوڈ:

آؤٹ پٹ:

اس جزو کو کسی بھی شے کے 'ریکارڈ' صفحہ میں شامل کریں (ہم نے اسے اکاؤنٹ ریکارڈ صفحہ میں شامل کیا ہے)۔ اس ونڈو کا معائنہ کریں اور 'کنسول' ٹیب پر جائیں۔

اب، 'تفصیلات حاصل کریں' کے بٹن پر کلک کریں۔ اس کے بعد، آپ دیکھیں گے کہ اندرونی متن تمام عناصر کے لیے کنسول پر ظاہر ہوتا ہے۔

مثال 2:

اس جزو کو استعمال کریں جس پر مثال 1 میں بحث کی گئی ہے۔ HTML جزو میں 'h1' ٹیگ کے ساتھ دو عناصر کی وضاحت کریں اور 'h1' کا اندرونی متن حاصل کرنے کے لیے 'js' فائل میں querySelector() کا استعمال کریں۔

firstExample.html

firstExample.js

پورا کوڈ:

آؤٹ پٹ:

ایک ہی ٹیگ والے دو عناصر ہیں۔ لہذا، querySelector() صرف پہلا عنصر منتخب کرتا ہے۔ جب آپ 'تفصیلات حاصل کریں' کے بٹن پر کلک کریں گے، تو آپ کو پہلا 'h1' نظر آئے گا اور اندرونی متن کنسول میں واپس آ جائے گا۔

مثال 3:

ہم querySelector() کو متغیر میں بھی اسٹور کر سکتے ہیں اور اندرونی متن حاصل کرنے کے لیے اس متغیر کو استعمال کر سکتے ہیں۔ آئیے کچھ متن کے ساتھ ایک اسپین ٹیگ بنائیں اور اسے متغیر میں اسٹور کرکے کنسول پر اندرونی متن واپس کریں۔

firstExample.html

firstExample.js

پورا کوڈ:

آؤٹ پٹ:

مثال 4:

اس مثال میں، ہم ایک بٹن اور ان پٹ ٹیکسٹ (بجلی-ان پٹ) بناتے ہیں جو موضوع کو سٹرنگ کے طور پر لے گا۔ ہم 'لائٹننگ ان پٹ' کو بطور سلیکٹر querySelector() طریقہ میں منتقل کرتے ہیں۔ اسے 'computer_related' متغیر کو تفویض کیا گیا ہے۔ اس بٹن پر کلک کرنے پر، اس متغیر میں موجود ویلیو ظاہر ہو جاتی ہے۔

secondExample.html

secondExample.js

پورا کوڈ:

آؤٹ پٹ:

مثال 5:

یہاں، ہم ڈیٹا recid کا استعمال کرتے ہیں۔ آئیے HTML فائل میں 'Span1'، 'Span2'، اور 'Span3' کے طور پر recid کے ساتھ تین اسپین ٹیگز کے ساتھ ایک بٹن بنائیں۔ querySelector().

thirdExample.html

thirdExample.js

پورا کوڈ:

آؤٹ پٹ:

نتیجہ

ہم نے سیکھا کہ DOM عناصر تک رسائی کے لیے querySelector() کو کیسے استعمال کیا جائے۔ querySelector() نے موجودہ ٹیمپلیٹ میں عناصر کو منتخب کرنے کے لیے 'this.template' کا استعمال کیا۔ اسے متغیر میں ذخیرہ کرنا یا براہ راست استعمال کرنا ممکن ہے۔ ان دونوں کا ذکر مثالوں کے ساتھ کیا جاتا ہے۔ نیز، ہم نے ایک مثال فراہم کی جس میں متعدد عناصر شامل ہیں۔ اس صورت میں، querySelector() پہلا عنصر لوٹاتا ہے۔