Er det en måte å velge søskenknuten?

Mens det integrerer forskjellige funksjonaliteter på en webside, kan det være et krav for å relatere dem til å definere deres formål. For eksempel å relatere de samme elementene gir brukeren en klar forståelse. I slike situasjoner hjelper valg av søskenknuter i JavaScript med å forenkle kodekompleksiteten, og bruker dermed de nåværende ressursene effektivt.

Denne bloggen vil diskutere tilnærmingene for å velge søskenknuter i JavaScript.

Er det en måte å velge søskenknuten i JavaScript?

Ja! For å velge en søskenknute i JavaScript, bruk følgende tilnærminger:

• “Parentnode”Eiendom og“spre(… )”Operatør
• “nextelementsibling”Eiendom

Metode 1: Velge søskenknuter i JavaScript ved hjelp av parentnodeegenskaper og spredning (...) operatør

“Parentnode”Eiendom gir elementets overordnede node. Denne egenskapen kan brukes kombinert med "Spred operatør (…)”For å få tilgang til foreldroden til det hentet elementet og returnere søskenknuter.

Eksempel
La oss forstå det uttalte konseptet praktisk talt:

søndag

Html

mandag

CSS

JavaScript

tirsdag

onsdag

jQuery

Const MyDay = Dokument.getElementById ("Days").Parentnode.QuerySelectorAll ("H5");
konsoll.Logg ('Søskenknuter er:', [... MyDay].Kart (e => e.innertekst));

I kodeblokken ovenfor:

• Spesifiser “”Element som overordnede node med“id”Og“stil”Som dets attributter.
• Inkluder også “

  ”Og“

  ”Elementer som har de uttalte ID -ene.

• I JS -koden får du tilgang til “

  ”Element via“getElementById ()”Metode.

• Bruk også “Parentnode”Eiendom og“QuerySelectorAll ()”Metode i kombinasjon for å få tilgang til overordnede noden til det hentede elementet og returnere alle (

  ) søskenknuter.

• Til slutt, bruk den kombinerte “Spred operatør (…)”Og“kart()”Metoder for å lagre resultatet av forrige trinn i en annen matrise.

Produksjon

I output kan man se at alle søskenknutene til "

”Vises.

Metode 2: Velg søskenknute med Nextelementsibling -egenskap ved hjelp av JavaScript

“QuerySelector ()”Metode sender ut det første elementet som samsvarer med en CSS -velger og“nextelementsibling”Eiendom returnerer neste element på et lignende trenivå. I kombinasjon kan disse tilnærmingene implementeres for å få tilgang til et spesifikt element og returnere den umiddelbare søskenknuten.

Syntaks

Node.nextelementsibling

I syntaks ovenfor vil neste søsken av den tilhørende noden bli returnert.

La oss oversikt over det under-uttalte eksemplet:

Radio

Se

Fjernsyn

Elektrisitet

Datamaskin

mobil

Const Current = Dokument.QuerySelector ('.nåværende');
const nextsibling = strøm.nextelementsibling;
konsoll.logg ("søskenknuten er:", nextsibling);

I ovennevnte kodebit:

• Inkluderer "”Element og rettferdiggjøre det til“senter”.
• Etter det, spesifiser “

  ”Elementer oppfører seg som søskenknuter.

• Spesifiser også et bestemt element som har tildelt "klasse”.
• I JavaScript -delen av koden får du tilgang til den spesielle noden som er spesifisert av klassen ved å bruke "QuerySelector ()”Metode.
• I neste trinn, bruk "nextelementsibling”Eiendom for å returnere den umiddelbare søsken med hensyn til det hentede elementet.
• Til slutt, vis den tilsvarende søskenknuten.

Produksjon

Ovennevnte utgang betyr at den tilsvarende søskenknuten er hentet med hell.

Konklusjon

For å velge søskenknuten i JavaScript, bruk den kombinerte “Parentnode”Eiendom og“spre(… )”Operatør eller“nextelementsibling”Eiendom. Den tidligere tilnærmingen får tilgang til overordnede noden til det hentede elementet og returnerer søskenknuter. Den sistnevnte tilnærmingen gir neste søsken mot den tilgjengelige noden. Denne bloggen forklarte tilnærmingene for å velge søskenknuter i JavaScript.