De methode getElementsByClassName() wordt gebruikt voor het selecteren of verkrijgen van de elementen via hun klassenaamwaarde. Deze DOM-methode retourneert een array-achtig object dat bestaat uit alle elementen met de opgegeven klassenaam. Wanneer de methode getElementsByClassName() voor een bepaald element wordt aangeroepen, doorzoekt deze het hele document en retourneert alleen die elementen die overeenkomen met de opgegeven of opgegeven klassenaam.
Syntaxis
var ele=document.getELementsByClassName('name');
Hier is naam het verplichte argument dat moet worden doorgegeven. Het is de tekenreeks die een enkele klassenaam of meerdere overeenkomende klassenamen specificeert.
Voorbeeld van de getElementsByClassName()-methode
Laten we eens naar enkele voorbeelden kijken om de praktische implementatie van de methode te kennen en te begrijpen.
Voorbeeld
Het is een eenvoudige klasse-implementatie die een array-achtig object retourneert bij het aanroepen van de variabele x.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
Uitgang:
Op dezelfde manier kunnen we de methode getElementsByClassName() implementeren voor het retourneren van verzamelingen elementen voor meerdere klassen.
Verschil tussen de methoden getElementsByClassName(), querySelector() en querySelectorAll().
getElementsByClassName(): Het matcht de elementen met de opgegeven klassenaam en retourneert een set van de overeenkomende elementen. De geretourneerde elementen zijn een live HTML-verzameling van elementen. Deze live-elementen kunnen verder worden bijgewerkt als er wijzigingen worden aangebracht in het Document Object Model.
querySelector(): Het retourneert slechts één enkel element dat overeenkomt met de opgegeven klassenaam. Als er geen overeenkomend element wordt gevonden, retourneert het null.
Het belangrijkste punt om te begrijpen is dat alle hierboven beschreven methoden één element of een lijst retourneren, maar de methode getELEmentsByClassName() dient de dynamisch update, en de andere twee methoden dienen voor de statisch .