'-elementer, der refererer til de underordnede elementer af det sidstnævnte '

'-element.

JavaScript kode

< manuskript >
lade få = dokument. getElementById ( 'barn' ) ;
lad forælder = få . parentElement ;
konsol. log ( 'Forældreelement -> ' , forælder. ydreHTML ) ;
konsol. log ( 'Overordnet element nodenavn ->' , forælder. nodenavn ) ;
lade børn = få . børn ;
til ( lad jeg = 0 ; jeg < børn. længde ; jeg ++ ) {
konsol. log ( `Barneelement $ { jeg } : ` , børn [ jeg ] . ydreHTML ) ;
}
til ( lad jeg = 0 ; jeg < børn. længde ; jeg ++ ) {
konsol. log ( `Child Element Node Navn $ { jeg } : ` , børn [ jeg ] . nodenavn ) ;
}
manuskript >

Forklaringen af ​​ovenstående kode er som følger:

• Få adgang til sidstnævnte '
  '-element ved dets 'id' ved hjælp af 'document.getElementById()' metode og hent dets overordnede element via ' parentElement ” ejendom.
• Vis nu det overordnede element med attributter og start- og sluttags via den anvendte ' ydreHTML ” ejendom.
• Returner også det overordnede elements navn, dvs. nodenavn ved hjælp af ' nodenavn ” ejendom.
• Derefter skal du få adgang til elementets børn ved at bruge egenskaben 'børn'.
• Anvend ' til ” loop for at iterere alle underordnede elementer og returnere dem med tags via den diskuterede “outerHTML” egenskab.
• Ligeledes skal du bruge 'for'-løkken igen for også at returnere nodenavnene for de underordnede elementer.

Hele koden

< html >
< legeme >
< div id = 'forælder' >
< div id = 'barn' >
< h1 > Første barn element < / h1 >
< h1 > Andet Barneelement < / h1 >
< / div >
< / div >
< / legeme >
< / html >
< manuskript >
let get = document.getElementById('child');
lad forælder = get.parentElement;
console.log('Overordnet element ->', parent.outerHTML);
console.log('Overordnet element nodenavn -> ', overordnet.nodenavn);
lade børn = få.børn;
for(lad i =0; i < børn.længde; i++ ) {
console.log ( `Barneelement $ { jeg } : `, børn [ jeg ] .outerHTML ) ;
}
til ( lad jeg = 0 ; i < børn.længde; i++ ) {
console.log ( `Child Element Node Navn $ { jeg } : `, børn [ jeg ] .nodeName ) ;
}
< / manuskript >

Produktion

Dette resultat indebærer, at målelementets overordnede og underordnede elementer vises i detaljer (sammen med nodenavnene) i overensstemmelse hermed.

Eksempel 3: Adgang til det overordnede element ved hjælp af egenskaben 'parentNode'.

I denne demonstration kan det overordnede element for et bestemt element påkaldes, og derefter vil dette bestemte elements overordnede element også blive hentet, hvilket resulterer i en indlejret adfærd. Dette kan opnås via ' forældreNode ” egenskab i stedet, der henter elementets overordnede node.

HTML kode

< html >
< legeme >
< div id = 'forælder' >
< ol id = 'Midlertidig' >
< at id = 'vikarbarn' >Python< / at >
< at >Java< / at >
< at >JavaScript< / at >
< / ol >
< / div > < / legeme >
< / html >

Her skal du oprette et '

'-element, der yderligere omfatter elementerne '

(ordnet liste)' og '
1. (listeelementer)' med de givne id'er.

   JavaScript kode

   < manuskript >
   lade få = dokument. getElementById ( 'tempchild' ) ;
   lad forælder = få . forældreNode ;
   konsol. log ( 'Overordnet element node af 'li'->' , forælder ) ;
   lad få 2 = dokument. getElementById ( 'Midlertidig' ) ;
   lad forælder 2 = få 2. forældreNode ;
   konsol. log ( 'Overordnet element node for 'ol'-> ' , forælder 2 ) ;
   manuskript >

   Udfør nedenstående trin baseret på dette kodestykke:

   • Kald '
   • '-elementet via ' getElementById() '-metoden, få adgang til dets overordnede elements node ved hjælp af ' forældreNode ” egenskab, og vis den overordnede node.
   • Ligeledes skal du nu påkalde den viste overordnede nodes, dvs. '
     ' forælder ved at gentage den samme metode.

   Hele koden

   < html >
   < legeme >
   < div id = 'forælder' >
   < ol id = 'Midlertidig' >
   < at id = 'vikarbarn' > Python < / at >
   < at > Java < / at >
   < at > JavaScript < / at >
   < / ol >
   < / div >
   < manuskript >
   let get = document.getElementById('tempchild');
       let parent = get.parentNode;
   console.log('Overordnet Element Node af 'li'-> ', overordnet);
   lad get2 = document.getElementById('temp');
       let parent2 = get2.parentNode;
   console.log('Overordnet Element Node af 'ol'-> ', forælder2);
   < / manuskript >
   < / legeme >
   < / html >

   Produktion
   

   Dette resultat betyder, at de overordnede noder i begge tilfælde vises i overensstemmelse hermed.

   Konklusion

   Det overordnede element kan tilgås ved at bruge HTML DOM ' parentElement ' ejendom kombineret med ' nodenavn ” egenskab eller hente den overordnede node via egenskaben “parentNode”. For at få adgang til det underordnede element i stedet skal du bruge ' barn ” ejendom.