Kako dostopati do nadrejenega elementa z uporabo lastnosti parentElement HTML DOM

Kako Dostopati Do Nadrejenega Elementa Z Uporabo Lastnosti Parentelement Html Dom



Medtem ko dodaja več funkcij v modelu dokumentov (DOM) z uporabo JavaScripta, mora razvijalec pogosto analizirati povezavo elementa. To je mogoče doseči z beleženjem nadrejenega elementa ciljnih elementov, kar poenostavi tok kode in oblikovanje vključenih funkcij na spletnem mestu.

Vsebina Pregled

Kaj je lastnost »parentElement« v JavaScriptu?

' parentElement ” Lastnost v JavaScriptu pridobi element, ki je nadrejeni ciljnemu elementu.

Kako dostopati do/priklicati nadrejeni element prek lastnosti parentElement HTML DOM?

Do nadrejenega elementa lahko dostopate z uporabo HTML DOM ' parentElement » Lastnost z » imevozlišča ' ali pridobitev vozlišča nadrejenega elementa namesto tega prek ' parentNode ” lastnina.





Sintaksa



vozlišče. parentElement

Povratna vrednost
Ta lastnost pridobi predmet elementa, ki predstavlja vozlišče nadrejenega elementa vozlišča, in daje ' nič ”, če vozlišče ne vsebuje nadrejenega.



Uporabljene skupne metode in lastnosti

document.querySelector() : Ta metoda pridobi prvi element, ki se ujema z izbirnikom CSS.



Sintaksa

dokument. querySelector ( to )

V tej sintaksi ' to ” se nanaša na enega ali več izbirnikov CSS.



document.getElementById() : Vrne element z navedenim ID-jem.

Sintaksa

dokument. getElementById ( id )

Tukaj, ' id ” označuje ID ciljnega elementa, ki ga je treba pridobiti.

selectedIndex : Ta lastnost pridobi indeks izbrane možnosti s spustnega seznama. The '-1' možnost prekliče izbiro vseh možnosti.

imevozlišča : Ta lastnost pridobi ime vozlišča.

otroci : Ta lastnost vrne podrejene elemente elementa kot zbirko.

zunanjiHTML : Ta lastnost dodeli ali pridobi element HTML kot tudi njegove atribute ter začetne in končne oznake.

parentNode : Ta posebna lastnost pridobi nadrejeno vozlišče elementa ali vozlišča.

Opomba : razlika med ' parentElement « in » parentNode ' je, da prejšnja lastnost, tj. 'parentElement', daje ' nič ”, če nadrejeno vozlišče ne odraža vozlišča elementa.

Primer 1: Dostop do nadrejenega elementa prek lastnosti »parentElement« v JavaScriptu

Ta primer prikliče nadrejeni element elementa in ob kliku gumba prikaže ime njegovega (nadrejenega) vozlišča.

HTML koda


< html >
< telo >
< h1 > Lastnost parentElement v JavaScriptu < / h1 >
< h2 > Izberite jezik: < / h2 >
< izberite razred = 'element' >
< možnost > Python < / možnost >
< možnost > Java < / možnost >
< možnost > JavaScript < / možnost >
< / izberite >
< gumb onclick = 'displayParent()' razred = 'gumb' > Prikaži nadrejeni element elementa 'option'. < / gumb >
< div razred = 'temp' >< / div >< / telo >
< html >

V tej kodi:

  • Določite dano “

    ” in “

    ” elemente, ki sestavljajo naslove prve in druge ravni.

  • Po tem ustvarite a “ ” element, ki ga predstavlja dani razred, ki vsebuje nadaljnje podrejene elemente, tj. “” .
  • Zdaj ustvarite gumb, povezan z ' onclick « dogodek, ki preusmeri na “displayParent()” deluje ob kliku na gumb.
  • Nazadnje navedite “
    ” element, v katerem naj bo prikazan rezultat, tj. dostopni nadrejeni element.

Koda CSS

>
telo {
poravnava besedila : center ;
barva : #fff ;
Barva ozadja : siva ;
višina : 100 % ;
}
.gumb {
višina : 2rem ;
mejni polmer : 2 slikovnih pik ;
premer : 35 % ;
marža : 2rem avto ;
zaslon : blok ;
barva : #ba0b0b ;
kazalec : kazalec ;
}
.temp {
velikost pisave : 1,5 rem ;
teža pisave : krepko ;
}
>

V zgornji kodi CSS:

  • Oblikujte celotno spletno stran z uporabljenimi lastnostmi »poravnava besedila«, »barva ozadja« itd.
  • Podobno uporabite slog za ustvarjen gumb prek njegovega razreda, tako da prilagodite njegovo višino, širino, zaslon, barvo itd.
  • Končno oblikujte » div ” s sklicevanjem na njegovo ime razreda, v katerem naj bo prikazan dostopni nadrejeni element.

Koda JavaScript



< scenarij >
funkcijo displayParent ( ) {
je bil dobiti = dokument. querySelector ( '.element' ) ;
je bil to = dobiti . opcije [ dobiti . selectedIndex ] ;
je bil priložiti = dokument. querySelector ( '.temp' ) ;
priložiti. notranjiHTML = 'Nadrejeni element možnosti Element je -> ' + to. parentElement . imevozlišča ;
}
scenarij >

Glede na te vrstice kode:

  • Definirajte funkcijo “displayParent()” ki dostopa do elementa “