JavaScript getElementsByClassName

I JavaScript er metoden GetElementSByClassName (). Dessuten returnerer den en htmlcollection som inneholder hvert etterkommerelement. Videre hjelper denne metoden også med å hente de nødvendige HTML -elementene, lagre dem i variabler og utføre den nødvendige funksjonaliteten ved hjelp av JavaScript.

Denne oppskrivningen vil lede om implementeringen av "getElementsByClassName ()”Metode i JavaScript.

Hva er JavaScript getElementSbyClassName () -metode?

“getElementsByClassName ()”Metode returnerer elementene som har det spesifiserte klassenavnet, som sendes som et argument. Den returnerer et objekt som ligner en rekke alle barneartikler med de spesifiserte klassenavnene. I tillegg inkluderer den HTML -samlingen av alle barneelementene.

Hvordan bruke JavaScript getElementsByClassName () -metode?

For å bruke JavaScript getElementsByClassName () -metode i JavaScript, følg den gitte syntaks:

element.getElementsByClassName (ClassName)

I den gitte syntaksen, “klassenavn”Er det obligatoriske argumentet som skal sendes. Det er strengverdien som refererer til enkelt- eller flere klassenavn.

Eksempel 1: Henter et enkelt element ved hjelp av getElementByClassName () -metode
I det følgende eksemplet, for det første, vil vi lage en div, tilordne den en "klasse" og legge til litt tekst i den:

Implementering av klasse

Nå, bruk “getElementsByClassName ()”Metode for å få tilgang til opprettet Div ved å gi klassenavnet som argument:

var x = dokument.getElementsByClassName ('Class');

Til slutt kan du vise den resulterende verdien på DOM ved å bruke "dokument.skrive()”Metode. Dette vil returnere et array-lignende objekt:

dokument.skriv (x);

Tilsvarende utgang vil være:

I output ovenfor refererer [objektet HTMLCollection] til det matrise-lignende objektet.

Eksempel 2: Henter flere elementer ved bruk av getElementsByClassName () -metode
I det følgende eksemplet, for det første, vil vi legge til tre avmerkingsbokser ved hjelp av taggen, tilordne dem samme klasse som "lang”Og legg til den nødvendige teksten som vist nedenfor:

Python

JavaScript

Html

Inkluderer nå en ekstra avkrysningsrute med verdien "Velg alle”Og vedlegg en“ved trykk()”Hendelse til det slik at når avkrysningsruten er valgt,“Sjekk()”Funksjon kalles med argumentet”dette”Som følger:

Velg alle

Deretter, i JavaScript -filen, definerer du en funksjon som heter “Sjekk()”Med en variabel kalt”avkrysningsrute”Som et argument som refererer til“dette”Spesifisert før. Få tilgang til avmerkingsboksen ved å bruke dokumentet.getElementsByClassName () -metode og plasser verdien av klasseattributtet “lang”Som argument. Til slutt, bruk en "til”Loop for å iterere hver verdi i en avkrysningsrute og bruke“ avkryssede ”attributtet til å merke hver verdi som sjekket:

funksjonskontroll (avkrysningsrute)
Få = dokument.getElementsByClassName ('Lang');
for (var i = 0; iFå [i].Sjekket = avkrysningsrute.krysset av;

Produksjon

Vi har samlet bruken av getElementsByClassName () -metoden ved bruk av forskjellige eksempler.

Konklusjon

“getElementsByClassName ()”Metode returnerer elementene som har det spesifiserte klassenavnet, som sendes som et argument. Den returnerer et objekt som ligner en rekke alle barneartikler med de spesifiserte klassenavnene. Du kan bruke denne metoden for å velge enkelt- eller flere HTML -elementer med samme klassenavn. Denne artikkelen forklarte bruken av getElementsByClassName () -metoden ved bruk av forskjellige eksempler.