Метод getElementsByClassName()
Пример document.getElementsByClassName()
Получить все элементы с class="example":
const collection = document.getElementsByClassName("example");
Попробуйте сами »
Получить все элементы с обоими "example" и "color" классами:
const collection = document.getElementsByClassName("example color");
Попробуйте сами »
Ещё примеры ниже.
Описание getElementsByClassName()
Метод getElementsByClassName() возвращает коллекцию элементов с указанным именем(ями) класса.
Метод getElementsByClassName() возвращает HTMLCollection.
Метод getElementsByClassName() доступно только для чтения.
HTMLCollection getElementsByClassName()
HTMLCollection — это коллекция (список) HTML-элементов в виде массива.
Элементы в коллекции доступны по индексу (начинается с 0).
Свойство length возвращает количество элементов в коллекции.
Похожи на getElementsByClassName()
Синтаксис getElementsByClassName()
document.getElementsByClassName(classname)
Параметры getElementsByClassName()
| Параметр | Описание |
|---|---|
| classname | Обязательно. Имя класса элементов. Поиск нескольких имен классов, разделенных пробелами, например "test demo". |
Возвращаемое значение getElementsByClassName()
| Тип | Описание |
|---|---|
| Object. | Объект HTMLCollection. Коллекция элементов с указанным именем класса. Элементы сортируются по мере их появления в документе. |
Ещё примеры getElementsByClassName()
Количество элементов с class="example":
let numb = document.getElementsByClassName("example").length;
Попробуйте сами »
Измените цвет фона всех элементов с помощью class="example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Попробуйте сами »
Похожи на getElementsByClassName()
Учебник CSS: Синтаксис CSS
Справочник CSS: Селектор CSS .class
Справочник HTML DOM: element.getElementsByClassName()
Справочник HTML DOM: Свойство className
Справочник HTML DOM: Свойство classList
Справочник HTML DOM: Объект стиля
Поддержка браузера getElementsByClassName()
document.getElementsByClassName() является функцией DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |