Få overordnet div av element - JavaScript

I mange situasjoner må du få foreldrenes div av et element for å utføre forskjellige funksjonaliteter. For eksempel å endre innholdet i et overordnet element basert på innholdet i et barneelement, bruke en stil på en gruppe relaterte elementer i et felles foreldreelement, og så videre. “ParentElement”Eller“Parentnode”Egenskaper i JavaScript kan være nyttige.

Dette innlegget vil demonstrere måten å få overordnede div av ethvert element ved hjelp av JavaScript.

Hvordan få foreldre Div of Element i JavaScript?

For å få foreldre div av et element, bruk følgende tilnærminger:

• ParentElement -attributtet
• Parentnode attributt

Metode 1: Få foreldre Div of Element ved å bruke "ParentElement" -attributt

Bruke "ParentElement”Attributt for å få foreldre Div -elementet i JavaScript. Denne egenskapen gir foreldreelementet i et gitt element i DOM. Det viser “null”Hvis elementet ikke har noen foreldre.

Syntaks

Følgende syntaks brukes til foreldreattributtet:

element.ParentElement

Eksempel

I en HTML -fil, oppretter du en "div”Element med en overskrift ved hjelp av et HTML -element”H4”:

Få foreldrenes div av element

Få referanse til overskriften “H4” -elementet i taggen eller en JavaScript -fil, ved å bruke den tildelte ID -en ved hjelp av “getElementById ()”Metode:

var getParentDivof = dokument.getElementById ("overskrift");

Ring "ParentElement”Attributt med overskriften for å få foreldre til“ H4 ”-elementet:

var parentdiv = getParentDivof.parentelement;

Skriv ut det resulterende overordnede elementet på konsollen:

konsoll.log (parentdiv);

Det gir foreldreelementet, som er "div”Av et HTML -element”H4”:

La oss se når foreldreelementet ikke er et divelement.

Her er overskriften vedlagt i “spenn”Element, som er vedlagt i“div”:

>

Få foreldrenes div av element ved å bruke 'ParentElement' eiendom

Nå, etter å ha fått referansen og overordnede elementet i overskriften, må du sjekke om foreldreelementet er et "div" bruker "Nodenavn" Egenskap. Hvis “ja”, Skriv ut elementet ellers, sjekk foreldrene til overordnede elementet i overskriften, og skriv ut på konsollen:

if (parentdiv.Nodename === "Div")
konsoll.log (parentdiv);

ellers
konsoll.Logg ("Parten til elementet er ikke en div, det er");
konsoll.log (parentdiv);
var parentdiv = parentdiv.parentelement;
konsoll.log (parentdiv);

Det kan sees at foreldreelementet i overskriften ikke er en "div" det er "spenn”, Så vi vil sjekke foreldre til foreldre“ Span ”-elementet og skrive ut på konsollen som er“div”Element:

Metode 2: Få foreldre Div of Element ved å bruke "Parentnode" -attributtet

En annen måte er å bruke “Parentnode" Egenskap. Det ligner på “ParentElement”Eiendom. Begge egenskapene returnerer foreldroden til et gitt element i DOM. Imidlertid er det en nøkkelforskjell mellom disse to egenskapene.

Egenskapen "ParentElement" sender alltid ut en elementnode (et element som har et tagnavn), mens egenskapen "Parentnode" kan gi typen node, inkludert elementnoder, tekstnoder, kommentarnoder og så videre.

Syntaks

Følg den gitte syntaksen som brukes til Parentnode -attributtet:

element.Parentnode

Eksempel

Det er en "div”Element som inneholder en overskrift med et HTML -element”H4”:

Få foreldrenes div av element

Etter å ha fått referansen til elementet, ring Parentnode -egenskapen:

var parentdiv = getParentDivof.parentnode;

Produksjon

Det handler om å få foreldre -divet til et HTML -element i JavaScript.

Konklusjon

For å få overordnet div av et element, bruk "ParentElement" eller "Parentnode" attributter. "ParentElement" gir en elementnode (et element som har et tagnavn), mens "parentnoden" gir typen node. Hvis du vet at foreldrene til et element alltid kommer til å være en elementnode, er det tryggere å bruke ParentElement -egenskapen. Hvis du trenger å håndtere muligheten for å få en ikke-elementnode, bør du bruke parentnodeegenskapen. Dette innlegget demonstrerte måtene å få overordnet div av et element i JavaScript.