Metoden getElementsByClassName() bruges til at vælge eller hente elementerne gennem deres klassenavnsværdi. Denne DOM-metode returnerer et array-lignende objekt, der består af alle de elementer, der har det angivne klassenavn. Når metoden getElementsByClassName() kaldes på et bestemt element, vil den søge i hele dokumentet og kun returnere de elementer, der matcher det angivne eller givne klassenavn.
Syntaks
var ele=document.getELementsByClassName('name');
Her er navn det obligatoriske argument, der skal godkendes. Det er strengen, der angiver enten et enkelt klassenavn eller flere klassenavne, der skal matche.
Eksempel på getElementsByClassName()-metoden
Lad os se på nogle eksempler for at kende og forstå den praktiske implementering af metoden.
Eksempel
Det er en simpel klasseimplementering, der returnerer et array-lignende objekt ved fremkaldelse af variablen 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);
Produktion:
På samme måde kan vi implementere metoden getElementsByClassName() til at returnere samlinger af elementer for flere klasser.
Forskel mellem getElementsByClassName(), querySelector() og querySelectorAll() metoder
getElementsByClassName(): Det matcher elementerne med det angivne klassenavn og returnerer et sæt af de matchede elementer. De returnerede elementer er levende HTML-samling af elementer. Disse levende elementer kan opdateres yderligere, hvis der foretages ændringer i dokumentobjektmodellen.
querySelector(): Det returnerer kun et enkelt element, der matcher det angivne klassenavn. Hvis den ikke finder noget matchende element, returnerer den null.
Det vigtigste at forstå er, at alle de ovenfor beskrevne metoder returnerer enten ét element eller en liste, men getELEmentsByClassName()-metoden tjener dynamisk opdatering, og de to andre metoder tjener til statisk .