جاوا اسکرپٹ میں، ' querySelectorAll() ” طریقہ پہلے ہی عنصر کو بازیافت کرتا ہے جو مخصوص CSS سلیکٹرز سے بالکل میل کھاتا ہے۔ یہ طریقہ اس کام کو انجام دینے کے لیے DOM درخت سے گزرنا شروع کر دیتا ہے۔ ایک بار عنصر مل جانے کے بعد، یہ خاص کام انجام دینے کے لیے اسکرپٹ سیکشن میں بیان کردہ JavaScript کی بلٹ ان خصوصیات یا طریقوں کو لاگو کرتا ہے۔ یہ طریقہ عام طور پر ضروریات کے مطابق ہدف شدہ عناصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ یہ صارفین کو ان تمام عناصر کو منتخب کرنے کی اجازت دیتا ہے جو مخصوص سلیکٹر یا دیے گئے انڈیکس میں رکھے گئے مخصوص سے مماثل ہوں۔
یہ گائیڈ JavaScript میں 'querySelectorAll()' طریقہ کے استعمال کی وضاحت کرتا ہے۔
جاوا اسکرپٹ میں 'querySelectorAll()' طریقہ استعمال کیسے کریں؟
استعمال کرنے کے لیے ' querySelectorAll() ” طریقہ، CSS سلیکٹر کو بطور دلیل اس کی وضاحت کریں۔ سی ایس ایس سلیکٹرز میں 'قسم، کلاس، اور آئی ڈی' شامل ہیں۔ اگر CSS سلیکٹر غلط ہے، تو یہ ایک نحوی غلطی لوٹاتا ہے، بصورت دیگر، یہ ایک جامد نوڈ لسٹ آبجیکٹ کو اپنے معیاری آؤٹ پٹ کے طور پر لوٹاتا ہے۔
نحو
document.querySelectorAll ( سی ایس ایس سلیکٹرز )
مندرجہ بالا نحو میں، ' سی ایس ایس سلیکٹرز تمام درست CSS سلیکٹرز سے رجوع کریں۔
آئیے اوپر بیان کردہ نحو کو عملی طور پر استعمال کریں۔
HTML کوڈ
دیئے گئے HTML کوڈ کا جائزہ:
< h2 کلاس = 'ڈیمو' > پہلی سرخی h2 >< h3 کلاس = 'ڈیمو' > دوسری سرخی h3 >
< ص کلاس = 'ڈیمو' > پہلا پیراگراف ص >
< ص کلاس = 'ڈیمو' > دوسرا پیراگراف ص >
< بٹن کلک پر = 'jsFunc()' > یہاں کلک کریں ! بٹن >
کوڈ کی اوپر کی لائنوں میں:
- ' ٹیگ ایک ذیلی سرخی کا اضافہ کرتا ہے جس میں کلاس 'ڈیمو' ہے۔
- ' ' ٹیگ 'ڈیمو' نامی اسی کلاس کے ساتھ دوسری ذیلی سرخی کی وضاحت کرتا ہے۔
- ' ' ٹیگز ایک ہی کلاس والے پیراگراف کے بیانات کو سرایت کرتے ہیں یعنی 'ڈیمو'۔
- ' <بٹن> ٹیگ میں 'jsFunc()' فنکشن کو انجام دینے کے لیے 'onclick' ماؤس ایونٹ کے ساتھ ایک نیا بٹن شامل ہے۔
نوٹ: اس گائیڈ میں مخصوص HTML کوڈ کی پیروی کی جاتی ہے۔
مثال 1: ایک ہی کلاس والے عناصر کو منتخب کرنے اور ان کے رنگ تبدیل کرنے کے لیے 'querySelectorAll()' طریقہ استعمال کرنا
یہ مثال 'demo' کلاس استعمال کرنے والے تمام عناصر کو منتخب کرنے کے لیے 'querySelectorAll()' طریقہ استعمال کرتی ہے۔
جاوا اسکرپٹ کوڈ
آئیے ذیل میں بیان کردہ کوڈ کا جائزہ لیں:
< سکرپٹ >فنکشن jsFunc ( ) {
const فہرست = document.querySelectorAll ( '. ڈیمو' ) ;
کے لیے ( دو میں = 0 ; میں < list.length i++ ) {
فہرست [ میں ] .style.color = 'سنتری والا' ;
}
}
سکرپٹ >
مندرجہ بالا کوڈ لائنوں میں:
- ' jsFunc() فنکشن کی وضاحت کی گئی ہے۔
- اس کی تعریف میں، 'فہرست' متغیر استعمال کرتا ہے ' querySelectorAll() کلاس 'ڈیمو' والے تمام عناصر کو منتخب کرنے کا طریقہ۔
- اگلا، ' کے لیے 'لوپ کلاس والے تمام پائے جانے والے HTML عناصر کے ساتھ تکرار کرنے کے لئے نوڈ کی فہرست کو شروع کرتا ہے' ڈیمو اور ' کا استعمال کرتے ہوئے ان کے متن کا رنگ تبدیل کریں style.color ' جائیداد.
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ میں، یہ دیکھا جا سکتا ہے کہ ایک ہی کلاس کے نام پر مشتمل عناصر کا متن کا رنگ بٹن پر کلک کرنے پر تبدیل ہو جاتا ہے۔
مثال 2: مخصوص انڈیکسڈ عناصر کو منتخب کرنے کے لیے 'querySelectorAll()' طریقہ استعمال کرنا
تمام عناصر کے علاوہ، صارف 'ڈیمو' کلاس والے مخصوص اشاریہ والے عنصر کو بھی منتخب کر سکتا ہے۔
جاوا اسکرپٹ کوڈ
دیئے گئے جاوا اسکرپٹ کوڈ پر غور کریں:
< سکرپٹ >فنکشن jsFunc ( ) {
const فہرست = document.querySelectorAll ( 'h2.demo' ) ;
فہرست [ 0 ] .style.color = 'سبز' ;
}
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- 'لسٹ' متغیر 'h2' عنصر کو منتخب کرتا ہے جس کی کلاس 'ڈیمو' کی مدد سے ہے querySelectorAll() 'طریقہ.
- اس کے بعد، 'فہرست' متغیر '0' انڈیکس پر رکھے گئے 'H2' عنصر کے متن کا رنگ تبدیل کرنے کے لیے 'h2' عنصر کے اشاریہ کی وضاحت کرتا ہے۔
آؤٹ پٹ
آؤٹ پٹ سے پتہ چلتا ہے کہ صفر انڈیکس پر رکھے گئے 'H2' عنصر کے متن کا رنگ بٹن پر کلک کرنے پر کلاس 'ڈیمو' تبدیل ہو گیا ہے۔
مثال 3: ایک ہی کلاس والے عناصر کی تعداد حاصل کرنے کے لیے 'querySelectorAll()' طریقہ استعمال کرنا
یہ مثال 'querySelectorAll()' طریقہ استعمال کرتے ہوئے ایک ہی کلاس والے عناصر کی تعداد کو بازیافت کرتی ہے۔
HTML کوڈ
سب سے پہلے، 'مثال 1' کے ترمیم شدہ HTML کوڈ پر ایک نظر ڈالیں:
< ص آئی ڈی = 'کے لیے' >> ص >
اوپر بیان کردہ HTML کوڈ میں، 'مثال 1' HTML کوڈ کے آخر میں ایک id 'para' کے ساتھ ایک خالی پیراگراف شامل کریں۔
جاوا اسکرپٹ کوڈ
اب، جاوا اسکرپٹ کوڈ کے ساتھ جاری رکھیں:
< سکرپٹ >فنکشن jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'کے لیے' ) .innerHTML = nodelist.length;
}
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں کے مطابق:
- فنکشن 'jsFunc()' پہلے تمام '
' عناصر کو منتخب کرتا ہے ' querySelectorAll() 'طریقہ.
- اس کے بعد، ' getElementById() 'طریقہ اپنی id 'para' کے ذریعے شامل کردہ خالی پیراگراف تک رسائی حاصل کرتا ہے تاکہ اسے لاگو کردہ 'لمبائی' پراپرٹی کی واپسی قدر کے ساتھ شامل کیا جا سکے۔
آؤٹ پٹ
جیسا کہ دیکھا گیا ہے، مندرجہ بالا آؤٹ پٹ کل '4' عناصر دکھاتا ہے جو مخصوص CSS کلاس سلیکٹر 'ڈیمو' سے مماثل ہے۔
نتیجہ
' querySelectorAll() ' طریقہ CSS سلیکٹر کو اس کی قدر کے طور پر بتا کر آسانی سے استعمال کیا جا سکتا ہے۔ یہ طریقہ ہر HTML عنصر سے میل کھاتا ہے اور مخصوص سلیکٹر سے مماثل کو منتخب کرتا ہے۔ عناصر کے منتخب ہونے کے بعد، یہ اسکرپٹ سیکشن میں بیان کردہ ان پر مطلوبہ کام انجام دیتا ہے۔ اس گائیڈ نے جاوا اسکرپٹ میں 'querySelectorAll()' طریقہ کے استعمال کی مختصر وضاحت کی ہے۔