Документ HTML DOM getElementsByClassName()
Пример
Получить все элементы с class="example":
const collection = document.getElementsByClassName("example");
Получите все элементы с классами «пример» и «цвет»:
const collection = document.getElementsByClassName("example color");
Ниже приведены дополнительные примеры.
Определение и использование
Метод getElementsByClassName()
возвращает коллекцию элементов с указанными именами классов.
Метод getElementsByClassName()
возвращает HTMLCollection .
Свойство getElementsByClassName()
доступно только для чтения.
HTMLКоллекция
HTMLCollection — это коллекция узлов HTML.
Доступ к узлам в коллекции можно получить по порядковым номерам. Индекс начинается с 0.
Свойство length возвращает количество элементов в коллекции.
Смотрите также:
Метод документа getElementById()
Метод документа getElementsByTagName()
Метод Document querySelector()
Синтаксис
document.getElementsByClassName(classname)
Параметры
Parameter | Description |
classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Возвращаемое значение
Тип | Описание |
Объект. | Объект HTMLCollection . Коллекция элементов с указанным именем класса. Элементы сортируются по мере их появления в документе. |
Дополнительные примеры
Количество элементов с 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";
}
Связанные страницы
Учебник по CSS: синтаксис CSS
Справочник по CSS: CSS - селектор .class
Справочник по HTML DOM: элемент .getElementsByClassName()
Справочник по HTML DOM: свойство className
Справочник по HTML DOM: свойство classList
Справочник по HTML DOM: объект стиля
Поддержка браузера
document.getElementsByClassName()
является функцией DOM уровня 1 (1998 г.).
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |