JavaScript getElementsByClassName (Dansk)

Oversigt: I denne vejledning lærer du, hvordan du bruger metoden getElementsByClassName() til at vælge elementer efter klassenavn.

Introduktion til metoden getElementsByClassName ()

Hvert HTML-element har en valgfri klasseattribut som denne:

Code language: HTML, XML (xml)

Værdien af klasseattributten er en rumadskilt liste over elementets klasser. Klasserne er store og små bogstaver.

Klasserne giver dig mulighed for at bruge CSS til at matche elementer. For eksempel:

Code language: CSS (css)

I JavaScript bruger du getElementsByClassName() -metoden til at vælge elementer baseret på deres klasser.

Metoden getElementsByClassName() er tilgængelig på document -objektet og ethvert HTML-element.

getElementsByClassName() -metoden accepterer et enkelt argument, som er en streng, der indeholder et eller flere klassenavne:

Code language: JavaScript (javascript)

I dette syntaks, parameteren classNames er en streng, der repræsenterer et klassenavn, der skal matches. For eksempel:

Code language: JavaScript (javascript)

Hvis du matcher elementer efter flere klasser, skal du bruge mellemrum til at adskille dem på denne måde:

Code language: JavaScript (javascript)

Bemærk, at du ikke kan bruge klassevælgere, f.eks. .btn eller .btn-primary til getElementsByClassName() -metoden.

getElementsByClassName() -metoden returnerer en live HTMLCollection af elementer, som er et array-lignende objekt.

Hvis du kalder getElementsByClassName() -metoden på document -objektet, søger metoden for elementer med de angivne klassenavne i hele dokumentet.

Men når du kalder getElementsByClassName() -metoden på et bestemt element, returnerer den kun matchende elementer i undertræ for dette element.

JavaScript getElementsByClassName () eksempler

Lad os tage nogle eksempler på brug af metoden getElementsByClassName().

ntag at du har følgende HTML:

1) Opkald til JavaScript getElementsByClassName () på et elementeksempel

Følgende eksempel illustrerer, hvordan man bruger metoden getElementsByClassName() til at vælge <li> emner, der er efterkommere af <ul> -elementet:

Output:

Code language: JavaScript (javascript)

Sådan fungerer det:

• Vælg først <ul> element med klassens navn menu ved hjælp af getElementById() -metoden.
• Vælg derefter <li> -elementer, som er efterkommerne af <ul> -element ved hjælp af getElementsByClassName() -metoden.
• Opret endelig en matrix med tekstindholdet i <li> -elementer ved at låne map() -metoden til Array -objektet.

2) Opkald til JavaScript getElementsByClassName () i dokumenteksemplet

For at søge efter elementet med klasse heading-secondary, bruger du følgende kode:

Output:

Code language: JavaScript (javascript)

Dette eksempel kalder getElementsByClassName() -metoden på document -objektet, derfor søger den efter elementerne med klassen heading-secondary i hele dokumentet.

I denne vejledning lærte du, hvordan du bruger metoden getElementsByClassName() til at vælge elementer efter et eller flere klassenavne.