Metoden getElementsByClassName() används för att välja eller hämta elementen genom deras klassnamnsvärde. Denna DOM-metod returnerar ett arrayliknande objekt som består av alla element som har det angivna klassnamnet. När metoden getElementsByClassName() anropas på ett visst element, kommer den att söka igenom hela dokumentet och returnera endast de element som matchar det angivna eller givna klassnamnet.
Syntax
var ele=document.getELementsByClassName('name');
Här är namn det obligatoriska argumentet som ska godkännas. Det är strängen som anger antingen ett enda klassnamn eller flera klassnamn som ska matcha.
Exempel på metoden getElementsByClassName()
Låt oss titta på några exempel för att känna till och förstå den praktiska implementeringen av metoden.
Exempel
Det är en enkel klassimplementering som returnerar ett arrayliknande objekt när variabeln x anropas.
<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);
Produktion:
På liknande sätt kan vi implementera metoden getElementsByClassName() för att returnera samlingar av element för flera klasser.
Skillnaden mellan metoderna getElementsByClassName(), querySelector() och querySelectorAll()
getElementsByClassName(): Den matchar elementen med det angivna klassnamnet och returnerar en uppsättning av de matchade elementen. De returnerade elementen är en levande HTML-samling av element. Dessa levande element kan uppdateras ytterligare om några ändringar görs i dokumentobjektmodellen.
querySelector(): Den returnerar bara ett enda element som matchar det angivna klassnamnet. Om den inte hittar något matchande element, returnerar den null.
Huvudpoängen att förstå är att alla ovan beskrivna metoder returnerar antingen ett element eller en lista, men metoden getELEmentsByClassName() tjänar dynamisk uppdatering, och de andra två metoderna tjänar till statisk .