' عناصر جو بعد کے '

' عنصر کے چائلڈ عناصر کا حوالہ دیتے ہیں۔

جاوا اسکرپٹ کوڈ

< سکرپٹ >
دو حاصل کریں = دستاویز getElementById ( 'بچہ' ) ;
والدین دو = حاصل کریں . والدین عنصر ;
تسلی. لاگ ( 'والدین عنصر ->' , والدین بیرونی ایچ ٹی ایم ایل ) ;
تسلی. لاگ ( 'والدین عنصر نوڈ کا نام ->' , والدین nodeName ) ;
بچوں کو دو = حاصل کریں . بچے ;
کے لیے ( مجھے دو = 0 ; میں < بچے. لمبائی ; میں ++ ) {
تسلی. لاگ ( چائلڈ عنصر $ { میں } : ` , بچے [ میں ] . بیرونی ایچ ٹی ایم ایل ) ;
}
کے لیے ( مجھے دو = 0 ; میں < بچے. لمبائی ; میں ++ ) {
تسلی. لاگ ( چائلڈ عنصر نوڈ کا نام $ { میں } : ` , بچے [ میں ] . nodeName ) ;
}
سکرپٹ >

مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:

• مؤخر الذکر '
  ' عنصر تک اس کی 'id' کا استعمال کرتے ہوئے رسائی حاصل کریں۔ 'document.getElementById()' طریقہ اور اس کے بنیادی عنصر کو 'کے ذریعے حاصل کریں والدین عنصر ' جائیداد.
• اب، پیرنٹ عنصر کو اوصاف کے ساتھ ڈسپلے کریں، اور لاگو کردہ 'کے ذریعے شروع اور اختتامی ٹیگز بیرونی ایچ ٹی ایم ایل ' جائیداد.
• اس کے علاوہ، پیرنٹ عنصر کا نام واپس کریں یعنی نوڈ کا نام استعمال کرتے ہوئے ' nodeName ' جائیداد.
• اس کے بعد، 'بچوں' کی جائیداد کو استعمال کرنے والے عنصر کے بچوں تک رسائی حاصل کریں۔
• لاگو کریں ' کے لیے تمام چائلڈ عناصر کو دہرانے کے لیے لوپ کریں اور زیر بحث 'آؤٹر ایچ ٹی ایم ایل' پراپرٹی کے ذریعے ٹیگز کے ساتھ واپس کریں۔
• اسی طرح، چائلڈ عناصر کے نوڈ ناموں کو واپس کرنے کے لیے دوبارہ 'for' لوپ کا استعمال کریں۔

پورا کوڈ

< html >
< جسم >
< div آئی ڈی = 'والدین' >
< div آئی ڈی = 'بچہ' >
< h1 > پہلا بچہ عنصر < / h1 >
< h1 > دوسرا بچہ عنصر < / h1 >
< / div >
< / div >
< / جسم >
< / html >
< سکرپٹ >
let get = document.getElementById('child')؛
let parent = get.parentElement؛
console.log('Parent Element -> ', parent.outerHTML)؛
console.log('والدین عنصر نوڈ کا نام ->'، parent.nodeName)؛
بچوں کو دو = get.children؛
کے لیے ( let i = 0؛ i < children.length; i++ ) {
console.log ( چائلڈ عنصر $ { میں } : `، بچے [ میں ] .outerHTML ) ;
}
کے لیے ( مجھے دو = 0 ; i < children.length; i++ ) {
console.log ( چائلڈ عنصر نوڈ نام $ { میں } : `، بچے [ میں ] .nodeName ) ;
}
< / سکرپٹ >

آؤٹ پٹ

اس نتیجہ کا مطلب یہ ہے کہ ہدف کے عنصر کے والدین اور بچے کے عناصر اسی کے مطابق تفصیل سے (نوڈ کے ناموں کے ساتھ) دکھائے جاتے ہیں۔

مثال 3: 'parentNode' پراپرٹی کا استعمال کرتے ہوئے پیرنٹ عنصر تک رسائی حاصل کرنا

اس مظاہرے میں، کسی خاص عنصر کے بنیادی عنصر کو طلب کیا جا سکتا ہے اور پھر اس خاص عنصر کے پیرنٹ عنصر کو بھی حاصل کیا جائے گا جس کے نتیجے میں ایک نیسٹڈ برتاؤ ہوگا۔ یہ 'کے ذریعے حاصل کیا جا سکتا ہے پیرنٹ نوڈ اس کے بجائے پراپرٹی جو عنصر کے پیرنٹ نوڈ کو حاصل کرتی ہے۔

HTML کوڈ

< html >
< جسم >
< div آئی ڈی = 'والدین' >
< ol آئی ڈی = 'درجہ حرارت' >
< کہ آئی ڈی = 'ٹیمپ چائلڈ' > ازگر< / کہ >
< کہ جاوا< / کہ >
< کہ جاوا اسکرپٹ< / کہ >
< / ol >
< / div > < / جسم >
< / html >

یہاں، ایک '

' عنصر بنائیں جس میں مزید '

(آرڈرڈ لسٹ)' اور '
1. (لسٹ آئٹمز)' عناصر شامل ہوں جن میں دی گئی آئی ڈیز ہوں۔

   جاوا اسکرپٹ کوڈ

   < سکرپٹ >
   دو حاصل کریں = دستاویز getElementById ( 'ٹیم چائلڈ' ) ;
   والدین دو = حاصل کریں . پیرنٹ نوڈ ;
   تسلی. لاگ ( ''li'-> کا بنیادی عنصر نوڈ' ، والدین ) ;
   حاصل کرنے دو = دستاویز getElementById ( 'درجہ حرارت' ) ;
   والدین کو دو = get2. پیرنٹ نوڈ ;
   تسلی. لاگ ( ''ol'-> کا بنیادی عنصر نوڈ' ، والدین 2 ) ;
   سکرپٹ >

   کوڈ کے اس ٹکڑوں کی بنیاد پر، ذیل میں فراہم کردہ اقدامات انجام دیں:

   • '
   • ' عنصر کو ' کے ذریعے طلب کریں getElementById() 'طریقہ، 'کا استعمال کرتے ہوئے اس کے بنیادی عنصر کے نوڈ تک رسائی حاصل کریں پیرنٹ نوڈ پراپرٹی، اور پیرنٹ نوڈ ڈسپلے کریں۔
   • اسی طرح، اب اسی طریقہ کار کو دہراتے ہوئے ڈسپلے شدہ پیرنٹ نوڈز یعنی '
     ' پیرنٹ کو طلب کریں۔

   پورا کوڈ

   < html >
   < جسم >
   < div آئی ڈی = 'والدین' >
   < ol آئی ڈی = 'درجہ حرارت' >
   < کہ آئی ڈی = 'ٹیمپ چائلڈ' > ازگر < / کہ >
   < کہ > جاوا < / کہ >
   < کہ > جاوا اسکرپٹ < / کہ >
   < / ol >
   < / div >
   < سکرپٹ >
   let get = document.getElementById('tempchild')؛
   let parent = get.parentNode؛
   console.log('Parent Element Node of 'li'->'، والدین)؛
   let get2 = document.getElementById('temp')؛
   let parent2 = get2.parentNode؛
   console.log('Parent Element Node of 'ol'->', parent2)؛
   < / سکرپٹ >
   < / جسم >
   < / html >

   آؤٹ پٹ
   

   یہ نتیجہ اس بات کی نشاندہی کرتا ہے کہ دونوں صورتوں میں پیرنٹ نوڈس اسی کے مطابق دکھائے جاتے ہیں۔

   نتیجہ

   HTML DOM کا استعمال کرتے ہوئے بنیادی عنصر تک رسائی حاصل کی جا سکتی ہے۔ والدین عنصر ' جائیداد کے ساتھ مل کر ' nodeName 'پراپرٹی' یا 'parentNode' پراپرٹی کے ذریعے پیرنٹ نوڈ کو بازیافت کرنا۔ تاہم، اس کے بجائے چائلڈ عنصر تک رسائی حاصل کرنے کے لیے، ' بچہ ' جائیداد.