' na tumutukoy sa mga child element ng huling elementong '

'.

JavaScript Code

< script >
hayaan makuha = dokumento. getElementById ( 'bata' ) ;
hayaan ang magulang = makuha . parentElement ;
console. log ( ' Elemento ng Magulang -> ' , magulang. outerHTML ) ;
console. log ( 'Parent Element Node Name -> ' , magulang. nodeName ) ;
hayaan ang mga bata = makuha . mga bata ;
para sa ( hayaan mo ako = 0 ; i < mga bata. haba ; i ++ ) {
console. log ( `Elementong Bata $ { i } : ` , mga bata [ i ] . outerHTML ) ;
}
para sa ( hayaan mo ako = 0 ; i < mga bata. haba ; i ++ ) {
console. log ( `Pangalan ng Node ng Elemento ng Bata $ { i } : ` , mga bata [ i ] . nodeName ) ;
}
script >

Ang paliwanag ng code sa itaas ay ang mga sumusunod:

• I-access ang huling elemento ng '
  ' sa pamamagitan ng 'id' nito gamit ang “document.getElementById()” pamamaraan at kunin ang pangunahing elemento nito sa pamamagitan ng ' parentElement ” ari-arian.
• Ngayon, ipakita ang parent element na may mga attribute, at start at end tags sa pamamagitan ng inilapat na “ outerHTML ” ari-arian.
• Gayundin, ibalik ang pangalan ng parent element i.e., pangalan ng node gamit ang ' nodeName ” ari-arian.
• Pagkatapos nito, i-access ang mga bata ng elemento gamit ang property na 'mga bata'.
• Ilapat ang ' para sa ” loop upang ulitin ang lahat ng elemento ng bata at ibalik ang mga ito kasama ang mga tag sa pamamagitan ng tinalakay na property na “outerHTML”.
• Gayundin, gamitin muli ang loop na 'para sa' upang ibalik din ang mga pangalan ng node ng mga elemento ng bata.

Buong Code

< html >
< katawan >
< div id = 'magulang' >
< div id = 'bata' >
< h1 > Unang Bata Elemento < / h1 >
< h1 > Elemento ng Pangalawang Bata < / h1 >
< / div >
< / div >
< / katawan >
< / html >
< iskrip >
let get = document.getElementById('child');
hayaan ang magulang = get.parentElement;
console.log('Parent Element -> ', parent.outerHTML);
console.log('Parent Element Node Name -> ', parent.nodeName);
hayaan ang mga bata = makakuha.mga anak;
para sa(hayaan i =0; i < mga bata.haba; i++ ) {
console.log ( `Elementong Bata $ { i } : `, mga anak [ i ] .outerHTML ) ;
}
para sa ( hayaan mo ako = 0 ; i < mga bata.haba; i++ ) {
console.log ( `Child Element Node Pangalan $ { i } : `, mga anak [ i ] .nodeName ) ;
}
< / iskrip >

Output

Ang kinalabasan na ito ay nagpapahiwatig na ang mga elemento ng magulang at anak ng target na elemento ay ipinapakita nang detalyado (kasama ang mga pangalan ng node) nang naaayon.

Halimbawa 3: Pag-access sa Elemento ng Magulang Gamit ang 'parentNode' Property

Sa pagpapakitang ito, ang parent na elemento ng isang partikular na elemento ay maaaring i-invoke at pagkatapos ay ang parent na elemento ng partikular na elementong ito ay kukunin din na magreresulta sa isang nested na gawi. Ito ay maaaring makamit sa pamamagitan ng ' parentNode ” property sa halip na kumukuha ng parent node ng elemento.

HTML Code

< html >
< katawan >
< div id = 'magulang' >
< ol id = 'temp' >
< na id = 'tempchild' >Python< / na >
< na >Java< / na >
< na >JavaScript< / na >
< / ol >
< / div > < / katawan >
< / html >

Dito, gumawa ng elementong “

” na higit na binubuo ng mga elementong “

(ordered list)” at “
1. (list items)” na mayroong mga ibinigay na id.

   JavaScript Code

   < iskrip >
   hayaan makuha = dokumento. getElementById ( 'tempchild' ) ;
   hayaan ang magulang = makuha . parentNode ;
   console. log ( 'Parent Element Node ng 'li'-> ' , magulang ) ;
   hayaan mong makuha2 = dokumento. getElementById ( 'temp' ) ;
   hayaan ang magulang2 = makuha2. parentNode ;
   console. log ( 'Parent Element Node ng 'ol'-> ' , magulang2 ) ;
   iskrip >

   Batay sa snippet ng code na ito, gawin ang mga hakbang na ibinigay sa ibaba:

   • I-invoke ang “
   • ” na elemento sa pamamagitan ng “ getElementById() ”, i-access ang node ng parent element nito gamit ang “ parentNode ” property, at ipakita ang parent node.
   • Gayundin, tawagan ngayon ang ipinapakitang parent node i.e., '
     ' na magulang sa pamamagitan ng pag-uulit sa parehong pamamaraan.

   Buong Code

   < html >
   < katawan >
   < div id = 'magulang' >
   < ol id = 'temp' >
   < na id = 'tempchild' > sawa < / na >
   < na > Java < / na >
   < na > JavaScript < / na >
   < / ol >
   < / div >
   < iskrip >
   let get = document.getElementById('tempchild');
   hayaan ang magulang = get.parentNode;
   console.log('Parent Element Node ng 'li'-> ', magulang);
   let get2 = document.getElementById('temp');
   hayaan ang parent2 = get2.parentNode;
   console.log('Parent Element Node ng 'ol'-> ', parent2);
   < / iskrip >
   < / katawan >
   < / html >

   Output
   

   Ang kinalabasan na ito ay nagpapahiwatig na ang mga node ng magulang sa parehong mga kaso ay ipinapakita nang naaayon.

   Konklusyon

   Maaaring ma-access ang parent element sa pamamagitan ng paggamit ng HTML DOM “ parentElement ” property na sinamahan ng “ nodeName ” property o pagkuha ng parent node sa pamamagitan ng property na “parentNode”. Gayunpaman, para ma-access ang child element sa halip, gamitin ang “ bata ” ari-arian.