Hoe u toegang krijgt tot het bovenliggende element met behulp van de HTML DOM parentElement-eigenschap

Hoe U Toegang Krijgt Tot Het Bovenliggende Element Met Behulp Van De Html Dom Parentelement Eigenschap



Bij het toevoegen van meerdere functionaliteiten aan het Document Object Model (DOM) met behulp van JavaScript, moet de ontwikkelaar vaak de associatie van het element analyseren. Dit kan worden bereikt door het bovenliggende element van het/de doelelement(en) te loggen, waardoor de codestroom en de opmaak van de opgenomen functies op de site worden gestroomlijnd.

Inhoud overzicht

Wat is de eigenschap “parentElement” in JavaScript?

De ' ouderElement ”-eigenschap in JavaScript haalt het element op dat het bovenliggende element is van het doelelement.

Hoe kan ik het bovenliggende element openen/aanroepen via de HTML DOM parentElement-eigenschap?

Het bovenliggende element is toegankelijk via de HTML DOM “ ouderElement ” eigendom met de “ knooppuntNaam ” eigenschap of in plaats daarvan het knooppunt van het bovenliggende element ophalen via de “ ouderknooppunt ' eigendom.





Syntaxis



knooppunt. ouderElement

Winstwaarde
Deze eigenschap haalt een elementobject op dat het bovenliggende elementknooppunt van een knooppunt vertegenwoordigt en geeft “ nul ” als het knooppunt geen ouder bevat.



Gebruikte gemeenschappelijke methoden en eigenschappen

document.querySelector() : Deze methode haalt het eerste element op dat overeenkomt met de CSS-selector.



Syntaxis

document. querySelector ( dit )

In deze syntaxis: “ dit ” verwijst naar een of meer CSS-selectors.



document.getElementById() : Het retourneert het element met de opgegeven ID.

Syntaxis

document. getElementById ( ID kaart )

Hier, ' ID kaart ” geeft de ID van het doelelement aan die moet worden opgehaald.

geselecteerdeIndex : deze eigenschap haalt de index van de geselecteerde optie op uit de vervolgkeuzelijst. De '-1' optie deselecteert alle opties.

knooppuntNaam : Deze eigenschap haalt de naam van het knooppunt op.

kinderen : Deze eigenschap retourneert de onderliggende elementen van het element als een verzameling.

buitensteHTML : Deze eigenschap wijst het HTML-element toe of haalt het op, evenals de attributen en begin- en eindtags.

ouderknooppunt : Deze specifieke eigenschap haalt het bovenliggende knooppunt van een element of knooppunt op.

Opmerking : Het verschil tussen de “ ouderElement ' En ' ouderknooppunt ”eigenschap is dat de voormalige eigenschap, d.w.z. “parentElement” geeft “ nul 'Als het bovenliggende knooppunt geen elementknooppunt weerspiegelt.

Voorbeeld 1: Toegang tot het bovenliggende element via de eigenschap “parentElement” in JavaScript

In dit voorbeeld wordt het bovenliggende element van een element aangeroepen en wordt de naam van het bovenliggende knooppunt weergegeven wanneer er op de knop wordt geklikt.

HTML code


< html >
< lichaam >
< h1 > parentElement-eigenschap in JavaScript < / h1 >
< h2 > Selecteer de taal: < / h2 >
< selecteren klas = 'element' >
< keuze > Python < / keuze >
< keuze > Java < / keuze >
< keuze > JavaScript < / keuze >
< / selecteren >
< knop bij klikken = 'displayParent()' klas = 'knop' > Geef het bovenliggende element van het 'optie'-element weer < / knop >
< div klas = 'temperatuur' >< / div >< / lichaam >
< html >

In deze code:

  • Specificeer het gegeven “

    ” En “

    ” elementen die respectievelijk de kopjes van niveau één en niveau twee omvatten.

  • Maak daarna een “” element vertegenwoordigd door de gegeven klasse die de verdere onderliggende elementen bevat, dat wil zeggen: “” .
  • Maak nu een knop die is gekoppeld aan een “ bij klikken 'gebeurtenis die doorverwijst naar de “displayParent()” functie na het klikken op de knop.
  • Geef ten slotte de “
    ” element waarin het resultaat, d.w.z. het geopende ouderelement, moet worden weergegeven.

CSS-code

>
lichaam {
tekst uitlijnen : centrum ;
kleur : #fff ;
Achtergrond kleur : grijs ;
hoogte : 100% ;
}
.knop {
hoogte : 2rem ;
grensradius : 2px ;
breedte : 35% ;
marge : 2rem auto ;
weergave : blok ;
kleur : #ba0b0b ;
cursor : wijzer ;
}
.temp {
lettertypegrootte : 1,5rem ;
lettertype dikte : vetgedrukt ;
}
>

In de bovenstaande CSS-code:

  • Stijl de algehele webpagina met de toegepaste eigenschappen 'text-align', 'background-color' enz.
  • Pas op dezelfde manier de stijl toe op de gemaakte knop via zijn klasse door de hoogte, breedte, weergave, kleur, enz. aan te passen.
  • Stijl ten slotte de “ div ' door te verwijzen naar de klassenaam waarin het geopende bovenliggende element moet worden weergegeven.

JavaScript-code



< script >
functie weergaveOuder ( ) {
was krijgen = document. querySelector ( '.element' ) ;
was dit = krijgen . opties [ krijgen . geselecteerdeIndex ] ;
was toevoegen = document. querySelector ( '.temp' ) ;
toevoegen. innerlijkeHTML = 'Ouderelement van optie-element is -> ' + dit. ouderElement . knooppuntNaam ;
}
script >

Volgens deze coderegels:

  • Definieer de functie “displayParent()” dat toegang krijgt tot het “