Hur man kommer åt det överordnade elementet med HTML DOM parentElement-egenskapen

Hur Man Kommer At Det Overordnade Elementet Med Html Dom Parentelement Egenskapen



Medan han lägger till flera funktioner i Document Object Model (DOM) med JavaScript, behöver utvecklaren ofta analysera elementets association. Detta kan uppnås genom att logga det överordnade elementet för målelementen, vilket effektiviserar kodflödet och formateringen av inkluderade funktioner på webbplatsen.

Innehållsöversikt

Vad är egendomen 'parentElement' i JavaScript?

den ' parentElement ” egenskap i JavaScript hämtar elementet som är överordnat till målelementet.

Hur får man åtkomst till/anropar det överordnade elementet via HTML DOM parentElement-egenskapen?

Det överordnade elementet kan nås med HTML DOM ' parentElement ' egendom med ' nodnamn ' egenskap eller hämta det överordnade elementets nod istället via ' parentNode ' fast egendom.





Syntax



nod. parentElement

Returvärde
Den här egenskapen hämtar ett elementobjekt som representerar den överordnade elementnoden för en nod och ger ' null ” om noden inte omfattar en förälder.



Använde vanliga metoder och egenskaper

document.querySelector() : Denna metod får det första elementet som matchar CSS-väljaren.



Syntax

dokumentera. querySelector ( detta )

I den här syntaxen ' detta ” hänvisar till en eller flera CSS-väljare.



document.getElementById() : Det returnerar elementet med det angivna id.

Syntax

dokumentera. getElementById ( id )

Här, ' id ” indikerar målelementets id som ska hämtas.

valt index : Den här egenskapen hämtar det valda alternativets index från rullgardinsmenyn. De '-1' alternativet avmarkerar alla alternativ.

nodnamn : Den här egenskapen hämtar nodens namn.

barn : Den här egenskapen returnerar elementets underordnade element som en samling.

yttre HTML : Den här egenskapen allokerar eller hämtar HTML-elementet såväl som dess attribut och start- och sluttaggar.

parentNode : Denna speciella egenskap hämtar föräldernoden för ett element eller en nod.

Notera : Skillnaden mellan ' parentElement ' och ' parentNode ' egenskap är att den tidigare egenskapen, dvs 'parentElement' ger ' null ” om föräldernoden inte reflekterar en elementnod.

Exempel 1: Åtkomst till det överordnade elementet via egenskapen 'parentElement' i JavaScript

Det här exemplet anropar det överordnade elementet för ett element och visar dess (förälder) nodnamn när du klickar på knappen.

HTML-kod


< html >
< kropp >
< h1 > parentElement Property i JavaScript < / h1 >
< h2 > Välj språk: < / h2 >
< Välj klass = 'element' >
< alternativ > Pytonorm < / alternativ >
< alternativ > Java < / alternativ >
< alternativ > JavaScript < / alternativ >
< / Välj >
< knapp onclick = 'displayParent()' klass = 'knapp' > Visa det överordnade elementet för elementet 'alternativ'. < / knapp >
< div klass = 'temp' >< / div >< / kropp >
< html >

I denna kod:

  • Ange det givna '

    ' och '

    ' element som omfattar rubrikerna nivå ett respektive nivå två.

  • Efter det skapar du en '' element representerat av den givna klassen som innehåller de ytterligare underordnade elementen, dvs. ' ' .
  • Skapa nu en knapp kopplad till en ' onclick ” händelse som omdirigerar till 'displayParent()' funktion när du klickar på knappen.
  • Ange slutligen '
    ' element där resultatet d.v.s. åtkomligt överordnat element ska visas.

CSS-kod

>
kropp {
textjustera : Centrum ;
Färg : #fff ;
bakgrundsfärg : grå ;
höjd : 100 % ;
}
.knapp {
höjd : 2 rem ;
gräns-radie : 2px ;
bredd : 35 % ;
marginal : 2 rem bil ;
visa : blockera ;
Färg : #ba0b0b ;
markören : pekare ;
}
.temp {
textstorlek : 1,5 rem ;
teckensnittsvikt : djärv ;
}
>

I ovanstående CSS-kod:

  • Style den övergripande webbsidan med de tillämpade egenskaperna 'text-align', 'background-color' etc.
  • På samma sätt, applicera stilen på den skapade knappen via dess klass genom att justera dess höjd, bredd, display, färg etc.
  • Till sist stilar du ' div ” genom att hänvisa till dess klassnamn där det åtkomliga överordnade elementet ska visas.

JavaScript-kod



< manus >
fungera displayFörälder ( ) {
var skaffa sig = dokumentera. querySelector ( '.element' ) ;
var detta = skaffa sig . alternativ [ skaffa sig . valt index ] ;
var bifoga = dokumentera. querySelector ( '.temp' ) ;
bifoga. innerHTML = 'Föräldraelement för alternativelement är -> ' + detta. parentElement . nodnamn ;
}
manus >

Enligt dessa kodrader:

  • Definiera funktionen 'displayParent()' som får åtkomst till '