Метод getElementsByClassName()
Пример
Получить все элементы с указанным именем класса:
var x =
document.getElementsByClassName("example");
Попробуйте сами »
Ещё примеры "Попробуйте сами" ниже.
Определение и использование
Метод getElementsByClassName() возвращает коллекцию всех элементов в документе с указанным именем класса в виде объекта HTMLCollection.
Объект HTMLCollection представляет собой коллекцию узлов. Доступ к узлам можно получить по индексным номерам. Индекс начинается с 0.
Совет: Вы можете использовать свойство length объект HTMLCollection для определения количества элементов с указанным именем класса вы можете перебирать все элементы и извлекать нужную информацию.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
| Метод | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Синтаксис
document.getElementsByClassName(classname)
Значения параметров
| Параметр | Тип | Описание |
|---|---|---|
| classname | String | Требуемый. Имя класса элементов, которые вы хотите получить. Для поиска нескольких имен классов разделите их пробелами, например "тестовая демонстрация". |
Технические детали
| DOM Версия: | Основной уровень 1 объект документа |
|---|---|
| Возвращаемое значение: | Объект HTMLCollection, представляющий коллекцию элементов с указанным именем класса. Элементы в возвращаемой коллекции сортируются по мере их появления в исходном коде |
Ещё примеры
Пример
Получить все элементы как с классами "example", так и "color":
var x =
document.getElementsByClassName("example color");
Попробуйте сами »
Пример
Узнать, сколько элементов с class="example" в документе (используя свойство length объекта HTMLCollection):
var x =
document.getElementsByClassName("example").length;
Попробуйте сами »
Пример
Изменить цвет фона всех элементов с помощью class="example":
var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Синтаксис
CSS Справочник: CSS .class Селектор
HTML DOM Справочник: element.getElementsByClassName()
HTML DOM Справочник: className Свойство
HTML DOM Справочник: classList Свойство
HTML DOM Справочник: Style Объект
HTML DOM Справочник: HTMLCollection Объект
