Kako pristupiti nadređenom elementu pomoću HTML DOM svojstva parentElement

Kako Pristupiti Nadredenom Elementu Pomocu Html Dom Svojstva Parentelement



Dok dodaje više funkcija u Document Object Model (DOM) pomoću JavaScripta, programer često treba analizirati povezanost elementa. To se može postići bilježenjem nadređenog elementa ciljnog elementa koji usmjerava tijek koda i oblikovanje uključenih značajki na web-mjestu.

Pregled sadržaja

Što je svojstvo 'parentElement' u JavaScriptu?

' parentElement ” Svojstvo u JavaScriptu dohvaća element koji je roditelj ciljnog elementa.

Kako pristupiti/pozvati roditeljski element putem HTML DOM svojstva parentElement?

Nadređenom elementu može se pristupiti pomoću HTML DOM-a “ parentElement ' svojstvo s ' naziv čvora ' ili dohvaćanje čvora nadređenog elementa umjesto toga putem ' parentNode ” vlasništvo.





Sintaksa



čvor. parentElement

Povratna vrijednost
Ovo svojstvo dohvaća objekt elementa koji predstavlja čvor nadređenog elementa čvora i daje ' ništavan ” ako čvor ne sadrži roditelja.



Korištene uobičajene metode i svojstva

document.querySelector() : Ova metoda dobiva prvi element koji odgovara CSS selektoru.



Sintaksa

dokument. querySelector ( ovaj )

U ovoj sintaksi, ' ovaj ” odnosi se na jedan ili više CSS selektora.



document.getElementById() : Vraća element koji ima navedeni ID.

Sintaksa

dokument. getElementById ( iskaznica )

Ovdje, ' iskaznica ” označava ID ciljnog elementa koji treba dohvatiti.

selectedIndex : Ovo svojstvo dohvaća indeks odabrane opcije s padajućeg popisa. The '-1' opcija poništava odabir svih opcija.

naziv čvora : Ovo svojstvo dohvaća naziv čvora.

djece : Ovo svojstvo vraća podređene elemente elementa kao kolekciju.

vanjskiHTML : Ovo svojstvo dodjeljuje ili dohvaća HTML element kao i njegove atribute te početne i završne oznake.

parentNode : Ovo posebno svojstvo dohvaća nadređeni čvor elementa ili čvora.

Bilješka : razlika između ' parentElement ' i ' parentNode ” svojstvo je da prethodno svojstvo, tj., “parentElement” daje “ ništavan ” ako nadređeni čvor ne odražava čvor elementa.

Primjer 1: Pristup nadređenom elementu putem svojstva “parentElement” u JavaScriptu

Ovaj primjer poziva roditeljski element elementa i prikazuje naziv njegovog (roditeljskog) čvora nakon klika na gumb.

HTML kôd


< html >
< tijelo >
< h1 > Svojstvo parentElement u JavaScriptu < / h1 >
< h2 > Odaberite jezik: < / h2 >
< Izaberi razreda = 'element' >
< opcija > Piton < / opcija >
< opcija > Java < / opcija >
< opcija > JavaScript < / opcija >
< / Izaberi >
< dugme na klik = 'displayParent()' razreda = 'dugme' > Prikaži roditeljski element elementa 'opcija'. < / dugme >
< div razreda = 'temp' >< / div >< / tijelo >
< html >

U ovom kodu:

  • Navedite dato “

    ” i “

    ” elementi koji se sastoje od naslova razine jedan i razine dva.

  • Nakon toga kreirajte a “” element predstavljen zadanom klasom koja sadrži daljnje podređene elemente, tj. “” .
  • Sada izradite gumb povezan s ' na klik ” događaj koji preusmjerava na “displayParent()” funkcija nakon klika na gumb.
  • Na kraju navedite “
    ” element u kojem će se prikazati rezultat tj. pristupljeni nadređeni element.

CSS kod

>
tijelo {
poravnanje teksta : centar ;
boja : #F F F ;
boja pozadine : siva ;
visina : 100% ;
}
.dugme {
visina : 2rem ;
granični radijus : 2 px ;
širina : 35% ;
margina : 2rem auto ;
prikaz : blok ;
boja : #ba0b0b ;
kursor : pokazivač ;
}
.temp {
veličina fonta : 1,5 rem ;
težina fonta : podebljano ;
}
>

U gornjem CSS kodu:

  • Stilizirajte cjelokupnu web stranicu s primijenjenim svojstvima 'text-align', 'background-color' itd.
  • Isto tako, primijenite stil na kreirani gumb putem njegove klase podešavanjem njegove visine, širine, prikaza, boje itd.
  • Na kraju, stilizirajte ' div ” pozivajući se na naziv svoje klase u kojoj se treba prikazati nadređeni element kojem se pristupa.

JavaScript kod



< skripta >
funkcija displayParent ( ) {
bio je dobiti = dokument. querySelector ( '.element' ) ;
bio je ovaj = dobiti . opcije [ dobiti . selectedIndex ] ;
bio je dodati = dokument. querySelector ( '.temp' ) ;
dodati. unutarnjiHTML = 'Nadređeni element opcije Element je -> ' + ovaj. parentElement . naziv čvora ;
}
skripta >

Prema ovim linijama koda:

  • Definirajte funkciju “displayParent()” koji pristupa elementu “