یہ گائیڈ اس بات کی وضاحت کرے گا کہ جاوا اسکرپٹ میں HTML DOM عنصر 'textContent' پراپرٹی تک کیسے رسائی حاصل کی جائے اور اس میں ہیرا پھیری کی جائے۔
پہلے، HTML DOM 'textContent' پراپرٹی کی بنیادی باتوں پر ایک نظر ڈالیں۔
جاوا اسکرپٹ میں HTML DOM 'text Content' پراپرٹی کیا ہے؟
' متن کا مواد ” بلٹ ان پراپرٹی ہے جو کسی مخصوص عنصر یا نوڈ کے متن کو سیٹ کرتی ہے، بازیافت کرتی ہے اور اس میں ترمیم کرتی ہے جس میں اس کی تمام اولاد بھی شامل ہے۔ اولاد بچے عناصر ہیں جیسے , , ، اور بہت کچھ جو فارمیٹنگ کے مقاصد کے لیے استعمال ہوتے ہیں۔ 'textContent' خاصیت کا استعمال کرتے ہوئے متن کو ترتیب دینے کے دوران، ہدف شدہ عنصر کی اولاد کو مکمل طور پر نئے متن سے بدل دیا جاتا ہے۔
نحو (متعین مواد)
' کا استعمال کرتے ہوئے ایک عنصر/نوڈ کے متن کو ترتیب دینے کے لیے بنیادی نحو متن کا مواد ' جائیداد نیچے لکھا ہے:
عنصر متن کا مواد = متن | نوڈ متن کا مواد = متن
مندرجہ بالا نحو مطلوبہ لیتا ہے ' متن ایک قدر کے طور پر جسے صارف کسی عنصر یا نوڈ کے لیے سیٹ کرنا چاہتا ہے۔
نحو (متنی مواد حاصل کریں)
کسی عنصر یا نوڈ کے متن کو ' کے ذریعے واپس کرنے کے لیے عمومی نحو متن کا مواد جائیداد یہاں بیان کی گئی ہے:
عنصر متن کا مواد | نوڈ متن کا موادواپسی کی قیمت: ' متن کا مواد 'جائیداد واپس کرتی ہے' متن ” کسی عنصر یا نوڈ کا اسپیسنگ کے ساتھ لیکن اس کے اندرونی HTML ٹیگز کے بغیر۔
اب اوپر بیان کردہ نحو کو عملی طور پر استعمال کریں اور 'ٹیکسٹ کونٹینٹ' پراپرٹی تک رسائی حاصل کریں۔
جاوا اسکرپٹ میں ایچ ٹی ایم ایل ڈوم ایلیمنٹ 'ٹیکسٹ کونٹینٹ' پراپرٹی تک رسائی اور ہیرا پھیری کیسے کریں؟
'innerHTML' اور 'innerText' کی خصوصیات کی طرح، ' متن کا مواد پراپرٹی صارفین کو مطلوبہ عنصر کے متن کو آسانی سے سیٹ، رسائی اور اس میں ترمیم کرنے کی بھی اجازت دیتی ہے۔ یہ سیکشن ذیل میں بیان کردہ مثالوں کا استعمال کرتے ہوئے ایک عنصر پر ان تمام کارروائیوں کو انجام دیتا ہے۔
مثال 1: عنصر/نوڈ ٹیکسٹ تک رسائی کے لیے 'ٹیکسٹ کونٹینٹ' پراپرٹی کا اطلاق کرنا
یہ مثال کسی خاص عنصر یا نوڈ کے متن کو اس کے تمام بچوں سمیت واپس کرنے کے لیے 'textContent' پراپرٹی کا اطلاق کرتی ہے۔
HTML کوڈ
< div آئی ڈی = 'myDiv' onmouseover = 'getText()' انداز = 'بارڈر: 3px ٹھوس سیاہ؛ چوڑائی: 400px؛ پیڈنگ: 5px 5px؛ مارجن: آٹو؛' >< h1 > پہلی سرخی < / h1 >
< h2 > دوسری سرخی < / h2 >
< h3 > تیسری سرخی < / h3 >
< h4 > چوتھی سرخی ۔ < / h4 >
< h5 > پانچویں سرخی < / h5 >
< h6 > چھٹی سرخی < / h6 >
< / div >
HTML کوڈ کی مندرجہ بالا لائنوں میں:
- ' 'myDiv' id رکھنے والا ٹیگ ایک div عنصر بناتا ہے جو درج ذیل خصوصیات کے بارڈر، چوڑائی، پیڈنگ (اوپر اور نیچے، بائیں اور دائیں) اور مارجن کے ساتھ اسٹائل کیا جاتا ہے۔ یہ بھی منسلک کرتا ہے ' onmouseover 'واقعہ جو دعوت دیتا ہے' getText() ” فنکشن جب صارف ماؤس کو اس پر گھماتا ہے۔
- div کے اندر، تمام مخصوص عنوانات (h1,h2,h3,h4,h5, اور h6) ٹیگز ان کی مخصوص سطحوں کے مطابق سرخی کے عناصر کو داخل کرتے ہیں۔
جاوا اسکرپٹ کوڈ
< سکرپٹ >
فنکشن getText ( ) {
عنصر تھا = دستاویز getElementById ( 'myDiv' ) ;
الرٹ ( عنصر متن کا مواد ) ;
}
سکرپٹ >اوپر لکھے جاوا اسکرپٹ کوڈ بلاک میں:
- ایک فنکشن کی وضاحت کریں جس کا نام ' getText() '
- اس فنکشن کے اندر، 'ایلیم' متغیر کا اطلاق ہوتا ہے ' getElementById() div عنصر تک اس کی id کے ذریعے رسائی کا طریقہ۔
- ' الرٹ() ' طریقہ ایک الرٹ باکس بناتا ہے جو استعمال کرتا ہے ' متن کا مواد والدین div کے متن کو اس کے تمام منحصر افراد کے ساتھ واپس کرنے کی جائیداد۔
آؤٹ پٹ
مندرجہ ذیل آؤٹ پٹ ایک الرٹ باکس کو پاپ اپ کرتا ہے جو div عنصر کے متنی مواد کو دکھاتا ہے:
مثال 2: کسی عنصر کے متنی مواد کو اس کے نزول سمیت تبدیل کرنے کے لیے 'ٹیکسٹ کونٹینٹ' پراپرٹی کا اطلاق کرنا
یہ مثال دکھاتی ہے کہ کس طرح 'textContent' کی خاصیت کسی عنصر کے تمام بچوں کو اس کے متن میں ترمیم کرتے ہوئے بدل دیتی ہے۔
HTML کوڈ
< مرکز >
< h1 آئی ڈی = 'میرا سر' کلک پر = 'modifyText()' >< ب > یہ ب > ہے < مدت > سرخی < مدت > < میں > عنصر میں >> h1 >
مرکز >کوڈ کی اوپر بیان کردہ لائنوں میں:
- ' 'ٹیگ ایک منسلک کے ساتھ لیول 1 کا ایک سرخی عنصر جوڑتا ہے' کلک پر 'واقعہ جو دعوت دیتا ہے' modifyText() جب صارف اس پر کلک کرتا ہے تو فنکشن۔
- عنوان کے عنصر میں ' '،' '، اور ' ” اس کی اولاد کے طور پر ٹیگ کرتا ہے۔ ' ' ٹیگ کو منسلک سٹرنگ کو بولڈ کرنے کے لیے استعمال کیا جاتا ہے، بغیر کسی اسٹائلنگ پراپرٹی کے '' ٹیگ کو دی گئی اسٹرنگ پر کوئی اسٹائل لگانے کے لیے استعمال کیا جاتا ہے، اور ' ' ٹیگ کو ظاہر کرنے کے لیے استعمال کیا جاتا ہے۔ سٹرنگ کو بطور ترچھا بیان کیا گیا ہے۔
جاوا اسکرپٹ کوڈ
< سکرپٹ >
جہاں h1 = دستاویز getElementById ( 'میرا سر' ) ;
تسلی. لاگ ( h1 ) ;
فنکشن modifyText ( ) {
h1. متن کا مواد = 'Linuxhint میں خوش آمدید!' ;
تسلی. لاگ ( h1 )
}
سکرپٹ >اوپر جاوا اسکرپٹ کوڈ میں:
- 'h1' متغیر 'کا استعمال کرتا ہے document.getElementById() اس کی تفویض کردہ id کے ذریعے عنوان کے عنصر تک رسائی کا طریقہ۔
- ' console.log() ' طریقہ اس کے مواد کو تبدیل کرنے سے پہلے کنسول پر رسائی شدہ سرخی عنصر کو دکھاتا ہے۔
- فنکشن کا نام ' modifyText() 'استعمال کرتا ہے' متن کا مواد حاصل کردہ سرخی عنصر کے متن میں ترمیم کرنے کے لیے خاصیت۔
- آخری 'console.log()' طریقہ ترمیم کے بعد دوبارہ 'h1' قدر دکھاتا ہے۔
آؤٹ پٹ
کنسول واضح طور پر ظاہر کرتا ہے کہ دیے گئے عنوان کے عنصر کے تمام بچوں کو اس پر کلک کرنے پر نئے متعین متن سے تبدیل کر دیا گیا ہے:
مثال 3: عنصر کے بچے کے متن میں ترمیم کرنے کے لیے 'ٹیکسٹ کونٹینٹ' پراپرٹی کا اطلاق کرنا
یہ مثال مخصوص عنصر کے بچے کے متن میں ترمیم کرنے کے لیے 'textContent' کی خاصیت کا استعمال کرتی ہے۔
HTML کوڈ
< div آئی ڈی = 'myDiv' انداز = 'بارڈر: 3px ٹھوس سیاہ؛ چوڑائی: 400px؛ پیڈنگ: 5px 5px؛ مارجن: آٹو؛' >
< مرکز >
< بٹن آئی ڈی = 'بی ٹی این' onmouseover = 'تبدیل متن()' > پرانا بٹن < / بٹن >
< / مرکز >
< / div >اس منظر نامے میں:
- 'div' عنصر میں ایک 'بٹن' عنصر ہوتا ہے جو '
'ٹیگ۔ - بٹن عنصر میں مزید تفویض کردہ آئی ڈی اور ایک ' onmouseover 'واقعہ جو کہتا ہے' متن تبدیل کریں() ” فنکشن جب ماؤس اس پر منڈلاتا ہے۔
جاوا اسکرپٹ کوڈ
< سکرپٹ >
parentElement تھا = دستاویز getElementById ( 'myDiv' ) ;
var ہدف = دستاویز getElementById ( 'بی ٹی این' ) ;
مجھے ڈھونڈ رہا تھا۔ = والدین عنصر. مشتمل ( ہدف ) ;
اگر ( والدین عنصر. مشتمل ( ہدف ) == سچ ہے ) {
تسلی. لاگ ( مجھے تلاش کرو ) ;
فنکشن چینج ٹیکسٹ ( ) {
ہدف متن کا مواد = 'نیا بٹن' ;
}
} اور {
تسلی. لاگ ( 'موجود نہیں ہے' )
}
سکرپٹ >مندرجہ بالا کوڈ کے ٹکڑوں میں:
- 'parentElement' متغیر کا اطلاق ہوتا ہے ' getElementById() پیرنٹ div عنصر تک رسائی کا طریقہ۔ 'ٹارگٹ' متغیر اپنی id کا استعمال کرتے ہوئے شامل کردہ بٹن عنصر کو حاصل کرنے کے لیے 'getElementById()' طریقہ کا بھی استعمال کرتا ہے۔
- 'find_me' متغیر 'کا استعمال کرتا ہے مشتمل() یہ چیک کرنے کا طریقہ کہ آیا ٹارگٹڈ بٹن عنصر div کا بچہ ہے یا نہیں۔ یہ طریقہ واپس آئے گا ' سچ ہے 'کے لیے 'ہاں' ورنہ 'جھوٹی'۔
- ' اور اگر بیان ایک کوڈ بلاک کی وضاحت کرتا ہے۔
- اگر ہدف شدہ عنصر والدین کے عنصر کا بچہ ہے، تو ' متن تبدیل کریں() فنکشن اس کے متن کو ' کے ذریعے تبدیل کرے گا متن کا مواد ' جائیداد. بصورت دیگر، 'اور' کوڈ بلاک مخصوص پیغام کو ظاہر کرنے کے لیے ' console.log() 'طریقہ.
آؤٹ پٹ
کنسول دکھاتا ہے ' سچ ہے 'بولین ویلیو جو بٹن کے عنصر کی تصدیق کرتی ہے وہ دی گئی div کا بچہ ہے اور پھر اس کے اوپر ماؤس کو منڈانے پر اس کا متن بدل جاتا ہے:
متن کے مواد، اندرونی متن، اور اندرونی ایچ ٹی ایم ایل خصوصیات کے درمیان فرق؟
عام طور پر، ' متن کا مواد '،' اندرونی متن '، اور ' اندرونی ایچ ٹی ایم ایل خصوصیات کسی عنصر یا نوڈ کے متن کو ترتیب دینے اور اسے حاصل کرنے کے طریقے سے ڈیل کرتی ہیں۔ تاہم، یہ خصوصیات کچھ عوامل کی بنیاد پر ایک دوسرے سے مختلف ہیں۔ یہ سیکشن ان سب کے درمیان بنیادی فرق کو اجاگر کرتا ہے:
شرائط 'متن کا مواد' 'اندرونی متن' 'اندرونی ایچ ٹی ایم ایل' واپسی کی قسم یہ ایک عنصر کا متن واپس کرتا ہے جس میں اس کے تمام بچوں (فارمیٹنگ ٹیگز)، سی ایس ایس کا پوشیدہ متن، اور جگہ شامل ہے۔ یہ کسی عنصر کے HTML ٹیگز کو واپس نہیں کرتا ہے۔ یہ اپنے تمام بچوں (فارمیٹنگ ٹیگز) کے ساتھ ہدف بنائے گئے HTML عنصر کا متنی مواد واپس کرتا ہے۔ یہ