Få barneelementer med tagnavn ved hjelp av JavaScript

Mens programmering i JavaScript, kan det være flere elementer mot samme tagnavn som må hentes for å utføre spesifikk funksjonalitet. Disse elementene kan brukes til å knytte foreldre- og barneelementene. I slike tilfeller er scenarier, å få barnelementer med tagnavn ved bruk.

Denne opplæringen vil forklare tilnærmingene for å få barnelementer med tagnavn i JavaScript.

Hvordan få barneelementer ved hjelp av tagnavn i JavaScript?

For å få barneelementer med tagnavn i JavaScript, bruk følgende metoder:

• “QuerySelectorAll () ”
• “getElementById ()”Og“getElementsByTagName ()”Metoder.

Metode 1: Få barneelementer etter tagnavn i JavaScript ved hjelp av QuerySelectorAll () Metode

“QuerySelectorAll ()”Metode henter alle elementene som samsvarer med en CSS -velger (er) og returnerer en nodeliste. Denne metoden kan brukes for å få de tilsvarende barneelementene ved å referere til “id”Av overordnede element og tagnavnet til barnelementene på en gang.

Syntaks

dokument.QuerySelectorAll (Selectors)

I den gitte syntaks:

• “velgere”Tilsvarer en eller flere enn en CSS -velger.

Eksempel

La oss sjekke ut følgende eksempel:

Dette er et bilde

I ovennevnte kodebit:

• Inkluderer "div”Element som har det angitt”id”.
• Legg også til en overskrift og et bilde som "barnHenholdsvis elementer.
• I JavaScript -koden får du tilgang til “div”Element (foreldre) av dets“id”Og overskriften (barnet) og bildet (barn) av deres“stikkord" Navn.
• Dette vil returnere barneelementene som er hentet med tagnavnene i siste trinn.

Produksjon

Ovennevnte utgang betyr at barneelementene hentes med suksess. La oss gå videre til neste tilnærming for å oppnå samme funksjonalitet.

Metode 2: Få barneelementer etter tagnavn i JavaScript ved hjelp av getElementById () og getElementsByTagName () Metoder

“getElementById ()”Metode gir et element som har tilsvarende ID, og“getElementsByTagName ()”Metode returnerer en samling av alle elementer som har tagnavnet. Disse metodene kan implementeres på samme. Men her kreves det separate metoder for å utføre den spesifiserte funksjonaliteten separat.

Syntaks

dokument.getElementById (ID)

I syntaks ovenfor:

• “Id”Peker på det tilhørende elementets“id”

dokument.getElementsByTagName (tag)

I den medfølgende syntaksen:

• “stikkord”Representerer elementets tagnavn.

Eksempel

La oss gå gjennom følgende eksempel:

Navn	Alder	By
Harry	25	Los Angeles

Bruk følgende trinn som gitt i koden ovenfor:

• Spesifiser “bord”Element (overordnet) som har det spesifiserte”id”.
• Etter det, legg til “Tabelldata” element som har de spesifiserte dataene i "Tabellrekke” element.
• I JavaScript -koden henter for det første foreldreelementet ved å bruke "getElementById ()”Metode.
• Få tilgang til barnelementet med tagnavnet ved å bruke “getElementsByTagName ()”Metode samtidig.
• Dette vil resultere i å hente alle barneelementene som tilsvarer det angitte tagnavnet.

Produksjon

I ovennevnte utgang kan det observeres at alle “td”Barneelementer i bordet (overordnet) hentes med suksess.

Konklusjon

“QuerySelectorAll ()”Metode,“getElementById ()", eller "getElementsByTagName ()”Metoder kan brukes for å få barnelementer ved tagnavn ved hjelp av JavaScript. Den tidligere metoden kan brukes for å få tilgang. De sistnevnte metodene kan implementeres for å få ID for overordnede element og taggenavn på barnelementene ved å bruke separate metoder for hver funksjonalitet. Denne bloggen demonstrerte å hente barnelementene med tagnavn i JavaScript.