JavaScript метод Element.getElementsByClassName()
JavaScript ElementОпределение и применение
JavaScript метод getElementsByClassName() объекта Element возвращает живую коллекцию HTMLCollection, которая содержит каждый элемент, который имеет указанное имя, или имена класса, поиск элементов при этом ведется внутри указанного элемента.
Обращаю Ваше внимание на то, что если Вам необходимо произвести поиск каждого элемента, который имеет указанное имя, или имена класса внутри всего документа, а не внутри определенного элемента, то вы можете воспользоваться одноименным методом getElementsByClassName() объекта Document.
Объект NodeList представляет коллекцию узлов, которые могут быть доступны по индексным номерам (индекс начинается с 0). Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса. Если искомые элементы отсутствуют, то значение length будет соответствовать значению 0.
Поддержка браузерами
| Метод |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| getElementsByClassName() | Да | Да | Да | Да | Да | Да |
JavaScript синтаксис:
// поиск элементов с определенным классом let elements = element.getElementsByClassName( name ) // поиск элементов с определенными классами let elements = element.getElementsByClassName( name1 name2 nameX ) name (-s) - String
Версия JavaScript
Document Object Model (DOM) Level 1 CoreЗначения параметров
| Параметр | Описание |
|---|---|
| name (-s) | Строковое значение, представляющее имя класса элемента или список искомых имен классов. При указании нескольких значений классов необходимо разделить имена классов пробелами. Обратите внимание, что при использовании нескольких значений для выбора элемента он должен содержать все перечисленные через пробел классы. Обязательный параметр. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование JavaScript метода .getElementByClassName() объекта Element</title> </head> <body> <button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick --> <section class = "mySection"> <div class = "block active first">Первый блок</div> <div class = "block active">Второй блок</div> <div class = "block">Третий блок</div> </section> <script> function myFunc() { const section = document.body.getElementsByClassName( "mySection" )[0]; // находим элемент с классом mySection внутри элемента <body> let blocks = section.getElementsByClassName( "block active" ); // находим элементы с классами block и active внутри элемента <section> for( let i = 0; i < blocks.length; i++){ // проходим циклом по всем элементам массивоподобного объекта blocks[i].style.color = "green"; // устанавливаем зеленый цвет текста каждому элементу } } </script> </body> </html>
В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода .getElementsByClassName() выбирает все элементы с определенным значением, которое содержится в глобальном атрибуте class и инициализируем переменную этим значением (массивоподобный объект). Обратите внимание, что мы сразу указали индекс 0, который ссылается на наш элемент <section>
.
Кроме того, с использованием метода .getElementsByClassName() мы выбираем элементы, которые содержат в значении глобального атрибута class значения block и active, и инициализируем переменную этими элементами. Обратите внимание, что поиск мы ведем непосредственно внутри элемента <section>. После этого мы проходим циклом по всем элементам этого массивоподобного объекта (объект NodeList) и устанавливаем зеленый цвет текста каждому элементу.
Результат нашего примера:
