JavaScript getElementsByClassName

Samenvatting: in deze tutorial leert u hoe u de getElementsByClassName() -methode kunt gebruiken om elementen op klassenaam te selecteren.

Inleiding tot de methode getElementsByClassName ()

Elk HTML-element heeft een optioneel class-attribuut zoals dit:

Code language: HTML, XML (xml)

De waarde van het class-attribuut is een door spaties gescheiden lijst van de klassen van het element. De klassen zijn hoofdlettergevoelig.

Met de klassen kunt u de CSS gebruiken om elementen te matchen. Bijvoorbeeld:

Code language: CSS (css)

In JavaScript gebruikt u de getElementsByClassName() -methode om elementen te selecteren op basis van hun klassen.

De getElementsByClassName() -methode is beschikbaar op het document -object en elk HTML-element.

Het getElementsByClassName() methode accepteert een enkel argument dat een string is die een of meer klassenamen bevat:

Code language: JavaScript (javascript)

In deze syntaxis, is de parameter classNames een tekenreeks die een overeenkomende klassenaam vertegenwoordigt. Bijvoorbeeld:

Code language: JavaScript (javascript)

Als u elementen met meerdere klassen vergelijkt, moet u witruimte gebruiken om ze als volgt te scheiden:

Code language: JavaScript (javascript)

Houd er rekening mee dat u geen klassekiezers kunt gebruiken, bijvoorbeeld .btn of .btn-primary voor de getElementsByClassName() methode.

De getElementsByClassName() methode retourneert een live HTMLCollection van elementen, die is een array-achtig object.

Als u de getElementsByClassName() -methode aanroept op het document -object, zoekt de methode voor elementen met de opgegeven klassenamen in het hele document.

Wanneer u echter de getElementsByClassName() -methode voor een specifiek element aanroept, retourneert het alleen overeenkomende elementen in de subboom van dat element.

JavaScript getElementsByClassName () voorbeelden

Laten we enkele voorbeelden nemen van het gebruik van de getElementsByClassName() -methode.

Stel dat u de volgende HTML heeft:

1) JavaScript getElementsByClassName () aanroepen voor een elementvoorbeeld

Het volgende voorbeeld illustreert hoe u de getElementsByClassName() -methode kunt gebruiken om de items die afstammelingen zijn van het <ul> element:

Output:

Code language: JavaScript (javascript)

Hoe het werkt:

• Selecteer eerst het <ul> -element met de klassenaam menu met behulp van de getElementById() -methode.
• Selecteer vervolgens <li> -elementen, die de afstammelingen zijn van de <ul> -element, met behulp van de getElementsByClassName() -methode.
• Maak ten slotte een array met de tekstinhoud van <li> -elementen door de map() -methode van het Array -object te lenen.

2) JavaScript getElementsByClassName () aanroepen in het documentvoorbeeld

Om naar het element te zoeken met de class heading-secondary, je gebruikt de volgende code:

Output:

Code language: JavaScript (javascript)

Dit voorbeeld roept de getElementsByClassName() -methode op het document -object aan en zoekt daarom naar de elementen met de klasse heading-secondary in het hele document.

In deze tutorial heb je geleerd hoe je de getElementsByClassName() -methode gebruikt om elementen te selecteren op basis van een of meer klassenamen.