JavaScript میں، DOM ٹری درجہ بندی کی ساخت کی پیروی کرتا ہے جس میں نوڈس کی ایک بڑی فہرست ہوتی ہے۔ ساخت روٹ نوڈ (دستاویز) سے شروع ہوتی ہے اور پھر والدین اور چائلڈ نوڈس کے ساتھ مل جاتی ہے۔ ان چائلڈ نوڈس تک رسائی حاصل کرنے کے لیے، جاوا اسکرپٹ پیش کرتا ہے ' چائلڈ نوڈس ' جائیداد. یہ خاصیت صارفین کو متعلقہ پیرنٹ عنصر کے تمام یا مخصوص چائلڈ نوڈ تک رسائی حاصل کرنے میں مدد کرتی ہے۔
یہ پوسٹ جاوا اسکرپٹ میں HTML DOM عنصر 'childNodes' پراپرٹی کے مقصد اور کام کے بارے میں وضاحت کرتی ہے۔
جاوا اسکرپٹ میں HTML DOM عنصر 'childNodes' پراپرٹی کیا ہے؟
' چائلڈ نوڈس ” صرف پڑھنے کے قابل خاصیت ہے جو ایک عنصر کے تمام چائلڈ نوڈس کی فہرست کو NodeList آبجیکٹ کی شکل میں واپس کرتی ہے۔ اس خاص خاصیت کو پیرنٹ عنصر کے مخصوص چائلڈ نوڈ تک رسائی کے لیے بھی استعمال کیا جا سکتا ہے۔ چائلڈ نوڈ '0 (صفر)' انڈیکس سے شروع ہوتا ہے۔ مزید برآں، وائٹ اسپیس، تبصرے، اور ٹیکسٹ نوڈس کو بھی چائلڈ نوڈ سمجھا جاتا ہے۔
نحو
element.childNodes
مندرجہ بالا عام نحو نوڈ لسٹ آبجیکٹ کو لوٹاتا ہے جس میں ہدف شدہ عنصر کے چائلڈ نوڈس ہوتے ہیں۔
آئیے اوپر بیان کردہ نحو کو عملی طور پر استعمال کریں۔
HTML کوڈ
پہلے، بیان کردہ HTML کوڈ پر ایک نظر ڈالیں:
< div آئی ڈی = 'Div' انداز = 'بارڈر: 2px ٹھوس سیاہ؛ اونچائی: 200px؛ چوڑائی: 250px؛ پیڈنگ: 10px' >< h2 > پہلی سرخی h2 >
< h3 > دوسری سرخی h3 >
< ص > پہلا پیراگراف ص >
< ص > دوسرا پیراگراف ص >
div >
< ص آئی ڈی = 'کے لیے' >> ص >
مندرجہ بالا کوڈ لائنوں میں:
- شامل کریں ' ایک id 'Div' کے ساتھ عنصر، بیان کردہ (بارڈر، اونچائی، اور چوڑائی) خصوصیات کی مدد سے اسٹائل کیا گیا ہے۔
- '
' عنصر کے اندر، بالترتیب دو عنوانات اور دو پیراگراف کی وضاحت کریں۔- آخر میں، ' ' ٹیگ ایک خالی پیراگراف کو ایک ID 'para' کے ساتھ سرایت کرتا ہے۔
نوٹ: اس پوسٹ میں بیان کردہ HTML کوڈ پر غور کیا گیا ہے۔
مثال 1: کسی خاص عنصر کے چائلڈ نوڈس کی کل تعداد حاصل کرنے کے لیے 'چائلڈ نوڈس' پراپرٹی کا اطلاق کرنا
یہ مثال مخصوص پیرنٹ عنصر میں موجود چائلڈ نوڈس کی کل تعداد حاصل کرنے کے لیے 'چائلڈ نوڈس' اور 'لمبائی' خصوصیات کا استعمال کرتی ہے۔
جاوا اسکرپٹ کوڈ
آئیے دیئے گئے کوڈ پر عمل کریں:
< سکرپٹ >
const elem = document.getElementById ( 'Div' ) ;
دو num = elem.childNodes.length؛
document.getElementById ( 'کے لیے' ) .innerHTML = 'قدر: ' + نمبر؛
سکرپٹ >کوڈ کی اوپر کی لائنوں میں:
- 'ایلیم' متغیر 'کا استعمال کرتا ہے getElementById() پیرنٹ عنصر تک رسائی کا طریقہ جس کی شناخت 'Div' ہے۔
- 'num' متغیر استعمال کرتا ہے ' چائلڈ نوڈس 'اور' لمبائی رسائی شدہ '' عنصر میں موجود چائلڈ نوڈس کی تعداد حاصل کرنے کے لیے خصوصیات۔
- آخر میں، 'getElementById()' طریقہ ایمبیڈڈ خالی پیراگراف کو اپنی id 'para' کے ذریعے حاصل کرتا ہے تاکہ اسے 'num' متغیر قدر کے ساتھ شامل کیا جا سکے۔
آؤٹ پٹ
آؤٹ پٹ کا مطلب ہے کہ کل ہے ' 9 دیئے گئے '
' عنصر میں چائلڈ نوڈس بشمول عناصر کے درمیان خالی جگہ۔مثال 2: مخصوص چائلڈ نوڈ کا نام حاصل کرنے کے لیے 'چائلڈ نوڈز' پراپرٹی کا اطلاق کرنا
چائلڈ نوڈس کی خاصیت کو 'نوڈ نام' خاصیت کے ساتھ چائلڈ نوڈ (ن) نام حاصل کرنے کے لیے بھی استعمال کیا جا سکتا ہے۔ آئیے اسے عملی طور پر دیکھتے ہیں۔
جاوا اسکرپٹ کوڈ
درج ذیل کوڈ کے ذریعے جائیں:
< سکرپٹ >
const elem = document.getElementById ( 'Div' ) ;
دو num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'کے لیے' ) .innerHTML = 'عنصر:' +نمبر
سکرپٹ >یہاں، ' چائلڈ نوڈس 'جائیداد کے ساتھ منسلک ہے' nodeName رسائی شدہ انڈیکس یعنی '1' کی بنیاد پر مخصوص چائلڈ نوڈ نام حاصل کرنے کے لیے پراپرٹی۔
آؤٹ پٹ
آؤٹ پٹ چائلڈ نوڈ کا نام یعنی 'H2' عنصر کو مخصوص انڈیکس کے خلاف دکھاتا ہے۔
مثال 3: مخصوص چائلڈ نوڈ کے متن کا رنگ تبدیل کرنے کے لیے 'چائلڈ نوڈز' پراپرٹی کا اطلاق کرنا
یہ مثال ٹارگٹ انڈیکسڈ چائلڈ کا رنگ تبدیل کرنے کے لیے زیر بحث پراپرٹی کا استعمال کرتی ہے۔
جاوا اسکرپٹ کوڈ
درج ذیل کوڈ پر غور کریں:
< سکرپٹ >
document.getElementById ( 'Div' ) چائلڈ نوڈس [ 3 ] .style.color = 'سبز' ;
سکرپٹ >یہاں، ' getElementById() ' طریقہ والدین '
' عنصر کو اپنی id 'Div' کے ذریعے حاصل کرتا ہے اور اس کے چائلڈ نوڈ کو مخصوص انڈیکس پر رکھا جاتا ہے۔ چائلڈ نوڈس بالترتیب جائیداد۔ اس کے بعد، استعمال کریں ' style.color رسائی شدہ چائلڈ نوڈ کے ٹیکسٹ کلر کو تبدیل کرنے کے لیے پراپرٹی۔آؤٹ پٹ
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ مخصوص چائلڈ نوڈ کے متن کا رنگ مناسب طریقے سے تبدیل کر دیا گیا ہے۔
نتیجہ
جاوا اسکرپٹ میں، ' چائلڈ نوڈس ' پراپرٹی نوڈ لسٹ آبجیکٹ کو بازیافت کرتی ہے جس میں ہدف HTML عنصر کے چائلڈ نوڈس ہوتے ہیں۔ چائلڈ نوڈس کو 'چائلڈ نوڈس' پراپرٹی کے ساتھ انڈیکس نمبر بتا کر ایک ساتھ یا مطلوبہ تک رسائی حاصل کی جا سکتی ہے۔ یہ خاصیت JavaScript فنکشن کو ایکسس شدہ چائلڈ نوڈس پر خصوصی کام انجام دینے کی اجازت دیتی ہے۔ اس مضمون نے جاوا اسکرپٹ میں 'چائلڈ نوڈس' پراپرٹی کو لاگو کرنے کے بارے میں تفصیل سے بتایا ہے۔
- '