Metoda getElementsByClassName() se používá k výběru nebo získání prvků prostřednictvím jejich hodnoty názvu třídy. Tato metoda DOM vrací objekt podobný poli, který se skládá ze všech prvků se zadaným názvem třídy. Při volání metody getElementsByClassName() pro jakýkoli konkrétní prvek prohledá celý dokument a vrátí pouze ty prvky, které odpovídají zadanému nebo danému názvu třídy.
Syntax
var ele=document.getELementsByClassName('name');
Jméno je zde povinným argumentem, který se má předat. Je to řetězec, který specifikuje buď jeden název třídy, nebo více názvů třídy, které se mají shodovat.
Příklad metody getElementsByClassName().
Podívejme se na několik příkladů, abychom poznali a pochopili praktickou implementaci metody.
Příklad
Jde o jednoduchou implementaci třídy, která při vyvolání proměnné x vrací objekt podobný poli.
<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);
Výstup:
Podobně můžeme implementovat metodu getElementsByClassName() pro vracení kolekcí prvků pro více tříd.
Rozdíl mezi metodami getElementsByClassName(), querySelector() a querySelectorAll()
getElementsByClassName(): Porovná prvky se zadaným názvem třídy a vrátí sadu odpovídajících prvků. Vrácené prvky jsou živou sbírkou prvků HTML. Tyto živé prvky lze dále aktualizovat, pokud jsou provedeny změny v objektovém modelu dokumentu.
querySelector(): Vrátí pouze jeden prvek, který odpovídá zadanému názvu třídy. Pokud nenajde žádný odpovídající prvek, vrátí hodnotu null.
Hlavním bodem k pochopení je, že všechny výše popsané metody vracejí buď jeden prvek nebo seznam, ale metoda getELementsByClassName() slouží dynamický aktualizace a další dvě metody slouží pro statický .