JavaScript getElementsByClassName (Svenska)

Sammanfattning: i den här självstudien lär du dig hur du använder metoden getElementsByClassName() för att välja element efter klassnamn.

Introduktion till metoden getElementsByClassName ()

Varje HTML-element har ett valfritt klassattribut så här:

Code language: HTML, XML (xml)

Värdet för klassattributet är en platsavgränsad lista över elementets klasser. Klasserna är skiftlägeskänsliga.

Med klasserna kan du använda CSS för att matcha element. Till exempel:

Code language: CSS (css)

I JavaScript använder du getElementsByClassName() -metoden för att välja element baserat på deras klasser.

Metoden getElementsByClassName() finns på document -objektet och alla HTML-element.

getElementsByClassName() -metoden accepterar ett enda argument som är en sträng som innehåller ett eller flera klassnamn:

Code language: JavaScript (javascript)

I detta syntax, parametern classNames är en sträng som representerar ett klassnamn som ska matchas. Till exempel:

Code language: JavaScript (javascript)

Om du matchar element med flera klasser måste du använda mellanslag för att separera dem så här:

Code language: JavaScript (javascript)

Observera att du inte kan använda klassväljare t.ex. .btn eller .btn-primary för getElementsByClassName() -metoden.

Metoden getElementsByClassName() returnerar en levande HTMLCollection av element är ett arrayliknande objekt.

Om du ringer till getElementsByClassName() -metoden på document -objektet söker metoden för element med de angivna klassnamnen i hela dokumentet.

Men när du anropar getElementsByClassName() -metoden för ett specifikt element returnerar det bara matchande element i subtree för det elementet.

JavaScript getElementsByClassName () exempel

Låt oss ta några exempel på att använda metoden getElementsByClassName().

ntag att du har följande HTML:

1) Anropa JavaScript getElementsByClassName () på ett elementsexempel

Följande exempel illustrerar hur man använder metoden getElementsByClassName() för att välja <li> objekt som är ättlingar till <ul> -elementet:

Output:

Code language: JavaScript (javascript)

Så fungerar det:

• Välj först <ul> -elementet med klassnamnet menu med metoden getElementById().
• Välj sedan <li> -element, som är ättlingarna till <ul> -element med getElementsByClassName() -metoden.
• Skapa slutligen en matris med textinnehållet i <li> -element genom att låna map() -metoden för Array -objektet.

2) Anropa JavaScript getElementsByClassName () i dokumentexemplet

För att söka efter elementet med klass heading-secondary, du använder följande kod:

Output:

Code language: JavaScript (javascript)

Detta exempel anropar getElementsByClassName() -metoden på document -objektet, därför söker den efter elementen med klassen heading-secondary i hela dokumentet.

I den här självstudien lärde du dig hur du använder metoden getElementsByClassName() för att välja element med ett eller flera klassnamn.