JavaScript getElementsByClassName (Norsk)

Sammendrag: i denne opplæringen lærer du hvordan du bruker metoden getElementsByClassName() til å velge elementer etter klassenavn.

Introduksjon til metoden getElementsByClassName ()

Hvert HTML-element har et valgfritt klasseattributt slik:

Code language: HTML, XML (xml)

Verdien av klasseattributtet er en plassskilt liste over klassene til elementet. Klassene er store og små bokstaver.

Klassene lar deg bruke CSS til å matche elementer. For eksempel:

Code language: CSS (css)

I JavaScript bruker du getElementsByClassName() -metoden til å velge elementer basert på klassene deres.

getElementsByClassName() -metoden er tilgjengelig på document -objektet og ethvert HTML-element.

getElementsByClassName() -metoden godtar et enkelt argument som er en streng som inneholder ett eller flere klassenavn:

Code language: JavaScript (javascript)

I dette syntaks, classNames -parameteren er en streng som representerer et klassenavn som skal matches. For eksempel:

Code language: JavaScript (javascript)

Hvis du matcher elementer etter flere klasser, må du bruke mellomrom for å skille dem slik:

Code language: JavaScript (javascript)

Merk at du ikke kan bruke klassevalg, f.eks. .btn eller .btn-primary for getElementsByClassName() -metoden.

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

Hvis du kaller getElementsByClassName() -metoden på document -objektet, søker metoden for elementer med de angitte klassenavnene i hele dokumentet.

Men når du kaller metoden getElementsByClassName() på et bestemt element, returnerer den bare samsvarende elementer i undertrær til elementet.

JavaScript getElementsByClassName () eksempler

La oss ta noen eksempler på bruk av getElementsByClassName() -metoden.

Anta at du har følgende HTML:

1) Kaller JavaScript getElementsByClassName () på et elementeksempel

Følgende eksempel illustrerer hvordan du bruker getElementsByClassName() -metoden til å velge <li> elementer som er etterkommere av <ul> -elementet:

Utgang:

Code language: JavaScript (javascript)

Slik fungerer det:

• Velg først <ul> -elementet med klassenavnet menu ved hjelp av getElementById() -metoden.
• Velg deretter <li> -elementene, som er etterkommerne til <ul> -element, ved hjelp av getElementsByClassName() -metoden.
• Til slutt oppretter du en matrise med tekstinnholdet i <li> -elementer ved å låne map() -metoden til Array -objektet.

2) Kalle JavaScript getElementsByClassName () på dokumenteksemplet

For å søke etter elementet med klasse heading-secondary, bruker du følgende kode:

Utgang:

Code language: JavaScript (javascript)

Dette eksemplet kaller getElementsByClassName() -metoden på document -objektet, derfor søker den etter elementene med klassen heading-secondary i hele dokumentet.

I denne opplæringen lærte du hvordan du bruker getElementsByClassName() -metoden for å velge elementer etter ett eller flere klassenavn.