Få attributt til en overordnet node ved hjelp av JavaScript

Mens det arbeider med komplekse koder, er det ofte et krav for å få tilgang til attributtene til en bestemt overordnet node mot flere barneknuter for å anvende funksjonalitetene. I et slikt tilfelle blir det å bruke de angitte attributtene praktisk i stedet for å tildele dem gjentatte ganger. Å få attributtet til en foreldrode ved hjelp av JavaScript hjelper dessuten å gjøre tilgangen mulig og bruke de tildelte attributtene effektivt.

Denne opplæringen vil diskutere tilnærmingene for å få attributtet til en foreldrode ved hjelp av JavaScript.

Hvordan få attributt til en overordnet node ved hjelp av JavaScript?

Attributtet til overordnede noden kan hentes i JavaScript ved å bruke følgende tilnærminger:

• “ParentElement”Eiendom med“getAttribute ()”Metode.
• “nærmest ()”Og“getAttribute ()”Metoder.
• “jQuery”Metoder.

Tilnærming 1: Få attributt til en overordnet node i JavaScript ved hjelp av ParentElement -egenskapen med GetAttribute () -metoden

“ParentElement”Eiendom gir foreldreelementet i det tilhørende elementet. Mens “getAttribute ()”Metode returnerer verdien av et elements attributt. Disse metodene kan brukes i kombinasjon for å få tilgang til barneknuten og få den spesielle attributtet til overordnede noden ved å referere til barneknuten.

Syntaks

element.getAttribute (navn)

I den ovennevnte syntaks:

“Navn”Peker på attributtets navn.

Eksempel
La oss oversikt følgende eksempel:

Dette er Linuxhint -nettstedet

I ovennevnte kodebit:

• For det første, inkluder "”Element som har det angitt”id”Som vil bli betraktet som“foreldre”Node.
• I neste trinn, spesifiser "

  ”Element som har det spesifiserte”id”, Som vil bli behandlet som“barn”Node.

• I JS -koden får du tilgang til barneknuten med sin "id”Via“getElementById ()”Metode.
• Etter det, knytter “ParentElement”Eiendom og“getAttribute ()”Metoder for den hentet barneknuten.
• Dette vil resultere i å hente den spesifiserte attributtet til overordnede noden ved å referere til barneknuten.

Produksjon

I outputten kan det observeres at ved å referere til "ID" til overordnede noden, vises den tilsvarende SET -attributtet.

Tilnærming 2: Få attributt til en overordnet node i JavaScript ved å bruke nærmeste () og getAttribute () metoder

“nærmest ()”Metode søker i elementene i et DOM -tre som samsvarer med en spesifikk CSS -velger. Denne metoden kan implementeres i kombinasjon med "getAttribute ()”Metode for å søke etter det nærmeste elementet til det aktuelle barneelementet og hente dets (foreldreknute) attributt.

Syntaks

element.nærmest (velgere)

I syntaks ovenfor:

“velgere”Samsvarer med en eller flere enn en CSS -velgere.

Eksempel
La oss gå gjennom følgende eksempel:

Dette er et bilde

Bruk følgende trinn som gitt i kodelinjene ovenfor:

• På samme måte, inkluder overordnede noden og to barneknuter som har den oppgitte “ids”, Henholdsvis.
• I JavaScript -koden får du tilgang til barneknuter, som diskutert, ved å bruke "getElementById ()”Metode.
• I neste trinn, bruk "nærmest ()”Metode som refererer til“id”Av overordnede element. Dette vil føre til at det får tilgang til det nærmeste elementet som har den oppgitte ID -en.
• Bruk også “getAttribute ()”Metode for å hente den spesifiserte”Egenskap”Av det tilgangede overordnede elementet i forrige trinn.
• Til slutt, vis den tilsvarende foreldrodens attributt.

Produksjon

Fra output ovenfor kan det sees at overordnet nodens attributt "stil”Er hentet.

Tilnærming 3: Få attributt til en overordnet node i JavaScript ved hjelp av jQuery -metoder

Denne tilnærmingen kan brukes for å få tilgang til barneknuten direkte og få tilgang til attributtet til overordnede noden ved å referere til den via separate metoder.

Eksempel
Følgende eksempel illustrerer det uttalte konseptet:

I koden ovenfor:

• Inkluderer "jQuery”Bibliotek for å bruke metodene.
• Etter det, spesifiser foreldre- og barneknoden på samme måte. Inngangen “tekst”Felt her vil fungere som“barn”Node.
• I JS -koden får du tilgang til barnelementet, i.e., Inngangstekstfelt. “foreldre ()" og "attr ()”Metoder vil lokalisere det spesifiserte attributtet i overordnet element og vise det via et varsel.

Produksjon

Ovennevnte utgang betyr at ønsket krav oppnås.

Konklusjon

ParentElement -egenskapen med getAttribute () -metoden kan omdirigere til overordnede noden og hente dens spesielle attributt. De nærmeste () og getAttribute () -metodene kan hente det nærmeste elementet med hensyn til det tilhørende barneelementet og hente dets attributt. Mens jQuery -metodene kan få tilgang til barneknuten direkte og bruke separate metoder for hver funksjon for å utføre ønsket krav. Denne bloggen forklarer hvordan du får attributtet til en foreldrode i JavaScript.