»-elementene som refererer til underelementene til sistnevnte «

»-element.

JavaScript-kode

< manus >
la få = dokument. getElementById ( 'barn' ) ;
la forelder = få . parentElement ;
konsoll. Logg ( 'Overordnet element -> ' , forelder. ytreHTML ) ;
konsoll. Logg ( 'Overordnet element nodenavn -> ' , forelder. nodenavn ) ;
la barn = få . barn ;
til ( la meg = 0 ; Jeg < barn. lengde ; Jeg ++ ) {
konsoll. Logg ( `Barneelement $ { Jeg } : ` , barn [ Jeg ] . ytreHTML ) ;
}
til ( la meg = 0 ; Jeg < barn. lengde ; Jeg ++ ) {
konsoll. Logg ( `Child Element Node Navn $ { Jeg } : ` , barn [ Jeg ] . nodenavn ) ;
}
manus >

Forklaringen av koden ovenfor er som følger:

• Få tilgang til det sistnevnte «
  »-elementet ved å bruke «id» ved hjelp av 'document.getElementById()' metoden og hent det overordnede elementet via ' parentElement ' eiendom.
• Vis nå det overordnede elementet med attributter, og start- og sluttkoder via den brukte ' ytreHTML ' eiendom.
• Returner også det overordnede elementets navn, dvs. nodenavnet ved å bruke ' nodenavn ” eiendom.
• Etter det får du tilgang til elementets barn ved å bruke 'barn'-egenskapen.
• Bruk ' til ”-løkke for å iterere alle underordnede elementer og returnere dem med taggene via den diskuterte “outerHTML”-egenskapen.
• På samme måte bruker du 'for'-løkken igjen for å returnere nodenavnene til de underordnede elementene også.

Hele koden

< html >
< kropp >
< div id = 'foreldre' >
< div id = 'barn' >
< h1 > Første barneelement < / h1 >
< h1 > Andre barneelement < / h1 >
< / div >
< / div >
< / kropp >
< / html >
< manus >
let get = document.getElementById('barn');
la foreldre = get.parentElement;
console.log('Overordnet element -> ', parent.outerHTML);
console.log('Overordnet element nodenavn -> ', overordnet.nodenavn);
la barn = få.barn;
for(la i =0; i < children.length; i++ ) {
console.log ( `Barneelement $ { Jeg } : `, barn [ Jeg ] .outerHTML ) ;
}
til ( la meg = 0 ; i < children.length; i++ ) {
console.log ( `Child Element Node Navn $ { Jeg } : `, barn [ Jeg ] .nodeName ) ;
}
< / manus >

Produksjon

Dette resultatet innebærer at de overordnede og underordnede elementene til målelementet vises i detalj (sammen med nodenavnene) tilsvarende.

Eksempel 3: Tilgang til overordnet element ved å bruke egenskapen 'parentNode'.

I denne demonstrasjonen kan det overordnede elementet til et bestemt element påkalles, og da vil dette bestemte elementets overordnede element også bli hentet, noe som resulterer i en nestet oppførsel. Dette kan oppnås via ' parentNode ” egenskap i stedet som henter elementets overordnede node.

HTML-kode

< html >
< kropp >
< div id = 'foreldre' >
< ol id = 'temp' >
< at id = 'tempebarn' >Python< / at >
< at >Java< / at >
< at >JavaScript< / at >
< / ol >
< / div > < / kropp >
< / html >

Her oppretter du et '

'-element som videre omfatter elementene '

(ordnet liste)' og '
1. (listeelementer)' med de gitte IDene.

   JavaScript-kode

   < manus >
   la få = dokument. getElementById ( 'tempchild' ) ;
   la forelder = få . parentNode ;
   konsoll. Logg ( 'Overordnet element node av 'li'-> ' , forelder ) ;
   la få 2 = dokument. getElementById ( 'temp' ) ;
   la foreldre 2 = få 2. parentNode ;
   konsoll. Logg ( 'Overordnet element node av 'ol'-> ' , forelder 2 ) ;
   manus >

   Basert på denne kodebiten, utfør trinnene nedenfor:

   • Åpne «
   • »-elementet via « getElementById() '-metoden, få tilgang til det overordnede elementets node ved å bruke ' parentNode ”-egenskapen, og vis den overordnede noden.
   • På samme måte kaller du nå den viste overordnede nodens, dvs. «
     »-foreldre ved å gjenta den samme metoden.

   Hele koden

   < html >
   < kropp >
   < div id = 'foreldre' >
   < ol id = 'temp' >
   < at id = 'tempebarn' > Python < / at >
   < at > Java < / at >
   < at > JavaScript < / at >
   < / ol >
   < / div >
   < manus >
   let get = document.getElementById('tempchild');
   la foreldre = get.parentNode;
   console.log('Overordnet element node av 'li'-> ', overordnet);
   la get2 = document.getElementById('temp');
   la parent2 = get2.parentNode;
   console.log('Overordnet Element Node av 'ol'-> ', overordnet2);
   < / manus >
   < / kropp >
   < / html >

   Produksjon
   

   Dette resultatet betyr at de overordnede nodene i begge tilfeller vises tilsvarende.

   Konklusjon

   Det overordnede elementet kan nås ved å bruke HTML DOM ' parentElement ' eiendom kombinert med ' nodenavn ”-egenskapen eller hente den overordnede noden via egenskapen “parentNode”. For å få tilgang til underordnet element i stedet, bruk ' barn ” eiendom.