Методът getElementsByClassName() се използва за избиране или получаване на елементите чрез стойността на името на класа им. Този DOM метод връща обект, подобен на масив, който се състои от всички елементи, имащи указаното име на клас. При извикване на метода getElementsByClassName() на който и да е конкретен елемент, той ще претърси целия документ и ще върне само онези елементи, които съответстват на определеното или дадено име на клас.
Синтаксис
var ele=document.getELementsByClassName('name');
Тук името е задължителният аргумент, който трябва да бъде подаден. Това е низът, който указва или едно име на клас, или множество имена на класове за съвпадение.
Пример за метод getElementsByClassName().
Нека да разгледаме някои примери, за да разберем и разберем практическото прилагане на метода.
Пример
Това е проста реализация на клас, която връща подобен на масив обект при извикване на променливата 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);
Изход:
По подобен начин можем да имплементираме метода getElementsByClassName() за връщане на колекции от елементи за множество класове.
Разлика между методите getElementsByClassName(), querySelector() и querySelectorAll()
getElementsByClassName(): Той съпоставя елементите с указаното име на клас и връща набор от съвпадащите елементи. Върнатите елементи са жива HTML колекция от елементи. Тези активни елементи могат да бъдат допълнително актуализирани, ако бъдат направени промени в обектния модел на документа.
querySelector(): Връща само един елемент, който съответства на указаното име на клас. Ако не намери съвпадащ елемент, връща нула.
Основното, което трябва да разберете, е, че всички гореописани методи връщат или един елемент, или списък, но методът getELementsByClassName() обслужва динамичен актуализиране, а другите два метода служат за статичен .