DOM ' ٹوکن لسٹ ” بہت ساری خصوصیات یا طریقوں پر مشتمل ہے جن تک آخری صارف اپنی ضروریات کے مطابق رسائی حاصل کر سکتا ہے۔ اس فہرست کے ذریعہ فراہم کردہ خصوصیات اور طریقے فراہم کردہ ڈیٹا سیٹس پر مخصوص کارروائیاں کرتے ہیں اور اسی کے مطابق نتیجہ واپس کرتے ہیں۔ یہ ایک صف کی طرح ہے کیونکہ اس میں مختلف ممبران ہوتے ہیں جنہیں ان کے انڈیکس کے ذریعے منتخب کیا جا سکتا ہے اور بالکل ایک صف کی طرح پہلا انڈیکس ہے ' 0 ' لیکن آپ ایسے طریقے استعمال نہیں کر سکتے جیسے ' پاپ ()'، 'دھکا()' یا 'شامل() '
یہ بلاگ جاوا اسکرپٹ کے ذریعے HTML DOMTokenList آبجیکٹ کے کام کی وضاحت کرے گا۔
JavaScript HTML DOMTokenList آبجیکٹ کے ساتھ کیسے کام کریں؟
HTML DOMTokenList بذات خود کچھ بھی نہیں ہے اور اس کی قیمت صرف ان خصوصیات اور طریقوں کی وجہ سے ہے جو اس میں موجود ہیں۔ آئیے مناسب نفاذ کے ساتھ ان خصوصیات اور طریقوں کو تفصیل سے دیکھیں۔
طریقہ 1: شامل کریں () طریقہ
' شامل کریں۔ ()' منتخب عنصر کے ساتھ نئی کلاسز، پراپرٹیز، یا سادہ ٹوکن منسلک یا تفویض کرتا ہے۔ اس کی ترکیب ذیل میں بیان کی گئی ہے:
html عنصر۔ شامل کریں ( oneOrMoreToken )
اس کا نفاذ درج ذیل کوڈ کے ذریعے کیا جاتا ہے۔
< سر >
< انداز >
.حرف کا سائز{
فونٹ سائز: بڑا
}
.رنگ{
پس منظر کا رنگ: کیڈٹ بلیو؛
رنگ: سفید دھواں؛
}
< / انداز >
< / سر >
< جسم >
< h1 انداز = 'رنگ: کیڈٹ بلیو؛' > لینکس < / h1 >
< بٹن کلک پر = 'عمل()' > جوڑنے والا < / بٹن >
< ص > اسٹائل لگانے کے لیے اوپر والے بٹن کو دبائیں۔ < / ص >
< div آئی ڈی = 'منتخب شدہ' >
< ص > میں سلیکٹڈ ٹیکسٹ ہوں۔ < / ص >
< / div >
< سکرپٹ >
فنکشن ایکشن () {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / سکرپٹ >
< / جسم >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- سب سے پہلے، دو CSS کلاسز کو منتخب کریں ' حرف کا سائز 'اور 'رنگ' اور انہیں بے ترتیب سی ایس ایس خصوصیات تفویض کریں جیسے ' فونٹ سائز'، 'پس منظر کا رنگ' اور 'رنگ '
- اگلا، '< کا استعمال کرتے ہوئے بٹن بنائیں بٹن >' ٹیگ جو 'کو پکارتا ہے عمل ()' فنکشن کا استعمال کرتے ہوئے کلک پر 'واقعہ سننے والا۔
- اس کے علاوہ، والدین بنائیں ' div ' عنصر اور اسے ایک آئی ڈی تفویض کریں ' منتخب شدہ اور اس کے اندر ڈمی ڈیٹا داخل کریں۔
- اس کے بعد، وضاحت کریں ' عمل ()' فنکشن اور اس کی منفرد آئی ڈی تک رسائی حاصل کرکے منتخب عنصر کے حوالہ کو اسٹور کریں۔
- آخر میں، استعمال کریں ' کلاس لسٹ 'کلاسوں کو تفویض کرنے اور منسلک کرنے کے لئے پراپرٹی' شامل کریں ()' طریقہ۔ پھر، اس طریقہ قوسین کے اندر CSS کلاسز کو پاس کریں اور یہ ان کلاسز کو منتخب کردہ عنصر پر لاگو کرے گا۔
مندرجہ بالا کوڈ کی تالیف کے بعد آؤٹ پٹ اس طرح تیار ہوتا ہے:
مندرجہ بالا gif اس بات کی تصدیق کرتا ہے کہ CSS کلاسز کو 'کے ذریعے منتخب کردہ عنصر کو تفویض کیا گیا ہے۔ شامل کریں ()' طریقہ۔
طریقہ 2: ہٹائیں() طریقہ
یہ طریقہ مخصوص کلاس یا آئی ڈی کو ایک یا زیادہ منتخب عناصر سے ہٹاتا ہے جیسا کہ ذیل کے کوڈ میں کیا گیا ہے۔
< سر >< انداز >
.حرف کا سائز {
فونٹ- سائز : بڑا
}
. رنگ {
پس منظر- رنگ : cadetblue
رنگ : سفید دھواں
}
< / انداز >
< / سر >
< جسم >
< h1 انداز = 'رنگ: کیڈٹ بلیو؛' > Linuxhint < / h1 >
< بٹن کلک پر = 'عمل()' >اضافہ کرنے والا< / بٹن >
< ص > اسٹائل لگانے کے لیے اوپر والے بٹن کو دبائیں< / ص >
< div آئی ڈی = 'منتخب شدہ' کلاس = 'فونٹ سائز کا رنگ' >
< ص > میں ہوں۔ منتخب شدہ متن .< / ص >
< / div >
< سکرپٹ >
فنکشن عمل ( ) {
document.getElementById ( 'منتخب شدہ' ) .classList.remove ( 'رنگ' ) ;
}
< / سکرپٹ >
< / جسم >
مندرجہ بالا کوڈ کی تفصیل اس طرح ہے:
- ابتدائی طور پر مذکورہ کوڈ میں بیان کردہ کوڈ کو یہاں بطور مثال استعمال کیا گیا ہے۔
- یہاں، دونوں ' رنگ 'اور' حرف کا سائز کلاسز براہ راست منتخب عنصر کو تفویض کی جاتی ہیں۔
- اس کے بعد اندر ' عمل ()' فنکشن جو 'کے ذریعہ طلب کیا جاتا ہے کلک پر 'واقعہ سننے والا' دور ()' ٹوکن طریقہ استعمال کیا جاتا ہے۔
- یہ طریقہ ایک یا ایک سے زیادہ کلاسز لیتا ہے جو منتخب کردہ عنصر سے ہٹائے جانے والے ہیں۔ ہمارے معاملے میں، ' رنگ 'کلاس کو منتخب کردہ HTML عنصر سے ہٹا دیا جائے گا۔
مندرجہ بالا کوڈ کے لیے آؤٹ پٹ اس طرح ظاہر ہوتا ہے:
مندرجہ بالا آؤٹ پٹ ظاہر کرتا ہے کہ مخصوص CSS کلاس کو 'remove()' طریقہ استعمال کرتے ہوئے منتخب کردہ عنصر سے ہٹا دیا گیا ہے۔
طریقہ 3: ٹوگل () طریقہ
' ٹوگل ()' طریقہ دونوں کا مجموعہ ہے' شامل کریں ()' اور ' دور ()' طریقے۔ یہ پہلے منتخب کردہ HTML عنصر کو فراہم کردہ CSS کلاس تفویض کرتا ہے اور پھر اسے صارف کے اعمال کے مطابق ہٹا دیتا ہے۔
< html >< سر >
< انداز >
.حرف کا سائز {
فونٹ- سائز : xx-بڑا
}
. رنگ {
پس منظر- رنگ : cadetblue
رنگ : سفید دھواں
}
< / انداز >
< / سر >
< جسم >
< h1 انداز = 'رنگ: کیڈٹ بلیو؛' > Linuxhint < / h1 >
< بٹن کلک پر = 'عمل()' >اضافہ کرنے والا< / بٹن >
< ص > اسٹائل لگانے کے لیے اوپر والے بٹن کو دبائیں< / ص >
< div آئی ڈی = 'منتخب شدہ' >
< ص > میں ہوں۔ منتخب شدہ متن .< / ص >
< / div >
< سکرپٹ >
فنکشن عمل ( ) {
document.getElementById ( 'منتخب شدہ' ) .classList.toggle ( 'حرف کا سائز' ) ;
}
< / سکرپٹ >
< / جسم >
< / html >
مندرجہ بالا کوڈ کی تفصیل ذیل میں بیان کی گئی ہے:
- وہی پروگرام استعمال کیا جاتا ہے جیسا کہ اوپر والے حصے میں استعمال کیا گیا ہے، صرف ' ٹوگل ()' طریقہ کو 'کے ساتھ تبدیل کیا جاتا ہے دور ()' طریقہ۔
تالیف کے مرحلے کے اختتام پر، پیداوار مندرجہ ذیل ہوگی:
آؤٹ پٹ سے پتہ چلتا ہے کہ مخصوص CSS کلاس کو صارف کے عمل کے مطابق شامل اور ہٹایا جا رہا ہے۔
طریقہ 4: پر مشتمل ہے () طریقہ
' مشتمل ()' طریقہ HTML عنصر پر مخصوص CSS کلاسز کی دستیابی کو چیک کرنے کے لیے استعمال کیا جاتا ہے اور اس کے نفاذ کو ذیل میں بیان کیا گیا ہے:
< سکرپٹ >فنکشن عمل ( ) {
دو ایکس = دستاویز getElementById ( 'منتخب شدہ' ) . کلاس لسٹ . مشتمل ( 'حرف کا سائز' ) ;
دستاویز getElementById ( 'پرکھ' ) . اندرونی ایچ ٹی ایم ایل = ایکس ;
}
سکرپٹ >
ایچ ٹی ایم ایل اور سی ایس ایس کا حصہ وہی رہتا ہے۔ صرف '< میں سکرپٹ >' ٹیگ، 'contains()' طریقہ کو منتخب عنصر پر لاگو کیا جاتا ہے تاکہ یہ چیک کیا جا سکے کہ آیا ' حرف کا سائز ” اس عنصر پر لاگو ہوتا ہے یا نہیں۔ اس کے بعد، نتیجہ ویب صفحہ پر ایک HTML عنصر پر ظاہر ہوتا ہے جس کی ایک شناخت ہوتی ہے ' پرکھ '
مندرجہ بالا کوڈ کی تالیف کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
آؤٹ پٹ سے پتہ چلتا ہے کہ 'کی قدر سچ ” لوٹا جاتا ہے جس کا مطلب ہے کہ منتخب کردہ HTML عنصر پر مخصوص CSS کلاس کا اطلاق ہوتا ہے۔
طریقہ 5: آئٹم () طریقہ
' آئٹم ()' طریقہ ٹوکن یا CSS کلاس کو ان کے انڈیکس نمبر کے مطابق منتخب کرتا ہے، جو 'سے شروع ہوتا ہے' 0 '، جیسا کہ نیچے دکھایا گیا ہے:
< جسم >< h1 طرز = 'رنگ: کیڈٹ بلیو؛' > لینکس h1 >
< بٹن پر کلک کریں۔ = 'عمل()' > چیکر بٹن >
< ص > سی ایس ایس کلاس جو پہلے تفویض کیا جاتا ہے۔ ، بازیافت ہو جاتا ہے : ص >
< h3 آئی ڈی = 'استعمال کیس' کلاس = 'FirstCls SecondCls ThirdCls' >> h3 >
< سکرپٹ >
فنکشن عمل ( ) {
ڈیمو لسٹ کرنے دیں۔ = دستاویز getElementById ( 'استعمال کیس' ) . کلاس لسٹ . آئٹم ( 0 ) ;
دستاویز getElementById ( 'استعمال کیس' ) . اندرونی ایچ ٹی ایم ایل = ڈیمو لسٹ ;
}
سکرپٹ >
جسم >
مندرجہ بالا کوڈ کی وضاحت:
- سب سے پہلے، ایک سے زیادہ CSS کلاسز ہمارے منتخب کردہ عنصر کو تفویض کی جاتی ہیں جس کی ایک id ' useCase 'اور' ایکشن ()' طریقہ جو 'کے ذریعے پکارا جاتا ہے کلک پر ' تقریب.
- اس فنکشن میں، ' آئٹم ()' کے اشاریہ کے ساتھ طریقہ 0 ” منتخب عنصر سے منسلک ہو جاتا ہے۔ نتیجہ متغیر میں محفوظ ہو جاتا ہے ' ڈیمو لسٹ جو پھر ویب پیج پر پرنٹ کیا جاتا ہے اندرونی ایچ ٹی ایم ایل ' جائیداد.
تالیف کے اختتام کے بعد، آؤٹ پٹ اس طرح آتا ہے:
آؤٹ پٹ CSS کلاس کا نام دکھاتا ہے جو پہلے منتخب عنصر پر لاگو ہوتا ہے اور بازیافت ہو جاتا ہے۔
طریقہ 6: لمبائی پراپرٹی
' لمبائی ' tokenList کی پراپرٹی عناصر یا تفویض کردہ کلاسوں کی تعداد لوٹاتی ہے جو منتخب کردہ عنصر پر لاگو ہوتے ہیں۔ عمل درآمد کا عمل ذیل میں بیان کیا گیا ہے:
< سکرپٹ >فنکشن عمل ( ) {
انہیں گرانے دو = دستاویز getElementById ( 'استعمال کیس' ) . کلاس لسٹ . لمبائی ;
دستاویز getElementById ( 'استعمال کیس' ) . اندرونی ایچ ٹی ایم ایل = گرانا ;
}
سکرپٹ >
مندرجہ بالا کوڈ بلاک میں:
- سب سے پہلے ' لمبائی ' جائیداد سے منسلک ہے ' کلاس لسٹ منتخب کردہ عنصر پر تفویض کردہ کلاسز کی تعداد کو بازیافت کرنے کے لیے پراپرٹی۔
- اگلا، جائیداد کا نتیجہ متغیر میں محفوظ ہو جاتا ہے ' گرانا 'جو ویب صفحہ پر ایک عنصر پر ظاہر کیا جائے گا جس کی ایک ID ہے' useCase '
- باقی کوڈ اوپر والے حصے کی طرح ہی رہتا ہے۔
تالیف کے بعد پیدا ہونے والی پیداوار ذیل میں بیان کی گئی ہے:
آؤٹ پٹ عنصر پر لاگو کلاسز کو لوٹاتا ہے۔
طریقہ 7: Replace() طریقہ
' تبدیل کریں ()' طریقہ وہ ہے جو کم از کم دو پیرامیٹر لیتا ہے اور منتخب عنصر کے لیے پہلے پیرامیٹر کو دوسرے پیرامیٹر سے بدل دیتا ہے، جیسا کہ ذیل میں دکھایا گیا ہے:
< سکرپٹ >فنکشن عمل ( ) {
ڈیمو لسٹ کرنے دیں۔ = دستاویز getElementById ( 'استعمال کیس' ) . کلاس لسٹ . تبدیل کریں ( 'حرف کا سائز' ، 'رنگ' ) ;
}
سکرپٹ >
یہاں، CSS ' حرف کا سائز 'کلاس کو CSS سے بدل دیا گیا ہے' رنگ 'ایک عنصر کے لئے کلاس جس کی ایک شناخت ہے' useCase ' باقی HTML اور CSS کوڈ وہی رہتا ہے جیسا کہ اوپر والے حصوں میں ہے۔
ترمیم کرنے کے بعد ' سکرپٹ اہم HTML فائل کا حصہ اور مرتب کرنا، آؤٹ پٹ اس طرح نظر آتا ہے:
آؤٹ پٹ سے پتہ چلتا ہے کہ مخصوص CSS کلاس کو دوسری کلاس سے بدل دیا گیا ہے۔
طریقہ 8: جائیداد کی قدر
' قدر ” ٹوکن لسٹ پراپرٹی منتخب HTML عنصر کو تفویض کردہ مطلوبہ اقدار کو بازیافت کرتی ہے۔ جب یہ ' کے ساتھ منسلک ہو جاتا ہے کلاس لسٹ ' پراپرٹی، منتخب کردہ عناصر کو تفویض کردہ کلاسز دوبارہ حاصل کی جاتی ہیں، جیسا کہ ذیل میں دکھایا گیا ہے:
< سکرپٹ >فنکشن عمل ( ) {
demoVal دو = دستاویز getElementById ( 'استعمال کیس' ) . کلاس لسٹ . قدر ;
دستاویز getElementById ( 'پرنٹ کریں' ) . اندرونی ایچ ٹی ایم ایل = demoVal ;
}
سکرپٹ >
اوپر بیان کردہ کوڈ کے ٹکڑوں کی تفصیل:
- کے اندر ' عمل ()' فنکشن باڈی، ' قدر ' جائیداد کے ساتھ منسلک ہے ' کلاس لسٹ منتخب کردہ HTML عناصر کی تفویض کردہ تمام کلاسز کو بازیافت کرنے کے لیے پراپرٹی۔
- اگلا، مندرجہ بالا پراپرٹی کا نتیجہ متغیر میں محفوظ ہو جاتا ہے۔ demoVal اور 'پرنٹ' کی آئی ڈی والے عنصر کے اوپر داخل کیا گیا۔
تالیف کے مرحلے کے اختتام کے بعد، ویب پیج پر آؤٹ پٹ اس طرح تیار ہوتا ہے:
آؤٹ پٹ CSS کلاسز کا نام دکھاتا ہے جو منتخب کردہ عنصر پر لاگو ہوتے ہیں۔
نتیجہ
HTML DOM TokenList آبجیکٹ ایک صف کی طرح ہے جو متعدد طریقوں اور خصوصیات کو ذخیرہ کرتا ہے جو فراہم کردہ HTML عنصر پر مخصوص فعالیت کو لاگو کرنے کے لیے استعمال ہوتے ہیں۔ TokenList کی طرف سے فراہم کردہ کچھ سب سے اہم اور وسیع پیمانے پر استعمال ہونے والے طریقے ہیں ' شامل کریں()'، 'ہٹائیں()'، 'ٹوگل()'، 'مشتمل()'، 'آئٹم()'، اور 'تبدیل کریں() ' وہ خصوصیات جو ٹوکن لسٹ کے ذریعہ فراہم کی جاتی ہیں وہ ہیں ' لمبائی 'اور' قدر ' اس مضمون میں JavaScript HTML DOMTokenList آبجیکٹ کے ساتھ کام کرنے کے طریقہ کار کی وضاحت کی گئی ہے۔