مختلف حالات میں، پروگرامرز کو نام وصف کے ذریعہ HTML عنصر حاصل کرنے کی ضرورت ہوتی ہے۔ فرض کریں کہ ڈویلپر فارم کنٹرول تک رسائی حاصل کرنا چاہتا ہے، جیسے ریڈیو بٹن یا چیک باکس، تاکہ اس کی قدر کو پڑھا جائے یا اس میں ہیرا پھیری ہو۔ مزید خاص طور پر، ' نام ” انتساب کا استعمال گروپ سے متعلقہ فارم کنٹرولز کے لیے کیا جاتا ہے اور ایک ہی نام بہت سے کنٹرولز کو فراہم کیا جا سکتا ہے، جس سے انہیں ایک گروپ کے طور پر رسائی حاصل کی جا سکتی ہے۔
یہ پوسٹ جاوا اسکرپٹ میں نام کے ذریعہ HTML عنصر کو بازیافت کرنے کے طریقوں کی وضاحت کرے گی۔
جاوا اسکرپٹ میں نام سے عناصر کیسے حاصل کریں؟
جاوا اسکرپٹ میں، آپ درج ذیل پہلے سے طے شدہ جاوا اسکرپٹ طریقوں کی مدد سے اس کے نام کی صفت کا استعمال کرتے ہوئے HTML عنصر تک رسائی حاصل کر سکتے ہیں۔
-
- getElementsByName() طریقہ
- querySelectorAll() طریقہ
طریقہ 1: 'getElementsByName()' طریقہ استعمال کرتے ہوئے نام سے عنصر حاصل کریں
HTML عنصر کو نام سے حاصل کرنے کے لیے، ' GetElementsByName() 'طریقہ. یہ طریقہ ان عناصر کا مجموعہ فراہم کرتا ہے جن میں مخصوص نام کی صفت ہوتی ہے۔
نحو
getElementsByName() طریقہ کے لیے درج ذیل نحو استعمال کیا جاتا ہے:
document.getElementsByName ( 'نام' )
مثال
سب سے پہلے، چھ بٹن بنائیں. ان میں سے پانچ کے پاس ' نام 'وہ وصف جو HTML عنصر کو حاصل کرنے کے لیے استعمال ہوتا ہے' بٹن ' آن کلک ایونٹ کو چھٹے بٹن کے ساتھ منسلک کریں جو ' اپلائی اسٹائل() پانچ بٹنوں کو اسٹائل کرنے کے لیے فنکشن:
< بٹن نام = 'بی ٹی این' > بٹن بٹن >< بٹن نام = 'بی ٹی این' > بٹن بٹن >
< بٹن نام = 'بی ٹی این' > بٹن بٹن >
< بٹن نام = 'بی ٹی این' > بٹن بٹن >
< بٹن نام = 'بی ٹی این' > بٹن بٹن > < بی آر >< بی آر >
< بٹن پر کلک کریں = 'ApplyStyle()' > یہاں کلک کریں بٹن >
ایک فنکشن کی وضاحت کریں ' اپلائی اسٹائل() ” جو بٹن پر کلک کرنے پر متحرک ہو جائے گا اور تمام بٹنوں کے پس منظر کا رنگ تبدیل کر دے گا۔ ایسا کرنے کے لئے، سب سے پہلے، حاصل کریں بٹن ' عناصر کو ایک گروپ کے طور پر کال کرکے ' GetElementsByName() طریقہ:
const btns = document.getElementsByName ( 'بی ٹی این' ) ;
btns.forEach ( btn = > {
btn.style.background = 'کیڈٹ بلیو' ;
} ) ;
}
جیسا کہ آپ بٹن پر کلک کرتے وقت آؤٹ پٹ میں دیکھ سکتے ہیں کہ پانچ بٹنوں کا پس منظر کا رنگ تبدیل ہو جائے گا:
طریقہ 2: 'querySelectorAll()' طریقہ استعمال کرتے ہوئے نام سے عنصر حاصل کریں۔
آپ بھی استعمال کر سکتے ہیں ' querySelectorAll() 'کا استعمال کرکے عناصر حاصل کرنے کا طریقہ' نام 'جاوا اسکرپٹ میں انتساب۔ یہ طریقہ کسی دستاویز میں موجود تمام عناصر کو بازیافت کرنے کے لیے استعمال کیا جاتا ہے جو کسی مخصوص سلیکٹر/انتساب جیسے کہ CSS کلاس، آئی ڈی، یا نام سے میل کھاتا ہے۔
نحو
دیئے گئے نحو کو ' کا استعمال کرتے ہوئے نام کے ذریعہ عنصر حاصل کرنے کے لئے استعمال کیا جاتا ہے querySelectorAll()' طریقہ:
document.querySelectorAll ( '[]' ) ;
مثال
مندرجہ ذیل مثال میں، ہم صرف ان بٹنوں کا رنگ تبدیل کریں گے جن کا نام ہے ' btn1 ”:
< div >< بٹن کا نام = 'بی ٹی این' > بٹن بٹن >
< بٹن کا نام = 'btn1' > بٹن بٹن >
< بٹن کا نام = 'بی ٹی این' > بٹن بٹن >
< بٹن کا نام = 'btn1' > بٹن بٹن >
< بٹن کا نام = 'بی ٹی این' > بٹن بٹن > < بی آر >< بی آر >
< بٹن پر کلک کریں = 'ApplyStyle()' > یہاں کلک کریں بٹن >
div >
متعین فنکشن میں، ہم سب سے پہلے رسائی والے بٹن عناصر کو کال کریں گے جن کا نام ہے ' btn1 اور پھر اس پر اسٹائل لگائیں:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'کیڈٹ بلیو' ;
} ) ;
}
دی گئی آؤٹ پٹ اس بات کی نشاندہی کرتی ہے کہ صرف دو بٹنوں نے اپنے پس منظر کا رنگ تبدیل کیا ہے جس کا نام 'btn1' ہے:
نوٹ: اگر آپ ایک عنصر حاصل کرنا چاہتے ہیں، تو یہ تجویز کی جاتی ہے کہ document.querySelectorAll کی بجائے document.querySelector استعمال کریں۔
نتیجہ
نام کے ذریعہ کسی عنصر کو حاصل کرنے یا بازیافت کرنے کے لئے، استعمال کریں ' GetElementsByName() ' یا پھر ' querySelectorAll() 'طریقے. نام سے عنصر حاصل کرنے کے لیے سب سے عام اور مؤثر طریقے سے استعمال کیا جانے والا طریقہ 'getElementsByName()' ہے۔ اس پوسٹ نے جاوا اسکرپٹ میں نام کے ذریعہ HTML عنصر کو بازیافت کرنے کے طریقوں کی وضاحت کی ہے۔