Метод getElementsByClassName() в HTML DOM Document

Определение и использование

getElementsByClassName() Метод возвращает набор элементов с указанным классом.

getElementsByClassName() Метод возвращает HTMLCollection.

getElementsByClassName() Свойства только для чтения.

HTMLCollection

HTMLCollection Это набор аналогичный массиву HTML-элементов (список).

Элементы в наборе можно получить по индексу (начиная с 0).

length Свойство возвращает количество элементов в наборе.

Дополнительная информация:

Метод getElementById()

Метод getElementsByTagName()

Метод querySelector()

Метод querySelectorAll()

Объект HTMLCollection

Пример

Пример 1

Получение всех элементов с классом "example":

const collection = document.getElementsByClassName("example");

Попробуйте сами

Пример 2

Получение всех элементов, у которых есть классы "example" и "color":

const collection = document.getElementsByClassName("example color");

Попробуйте сами

Пример 3

Количество элементов с классом "example":

let numb = document.getElementsByClassName("example").length;

Попробуйте сами

Пример 4

Изменить цвет фона всех элементов с классом "example":

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Попробуйте сами

Синтаксис

document.getElementsByClassName("example")classname)

Параметр

Параметр Описание
classname

Обязателен. Класс элемента.

Можно检索由 пробелами разделенные несколько классов, например "test demo".

Возвратное значение

Тип Описание
Объект

Объект HTMLCollection.

Сборка элементов с указанным классом.

Элементы сортируются по порядку их的出现 в документе.

Поддержка браузеров

document.getElementsByClassName() Это функция DOM Level 1 (1998).

Поддерживается всеми браузерами:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Уроки CSS:Грамматика CSS

Руководство по CSS:Выборщик CSS .class

Руководство по HTML DOM:element.getElementsByClassName()

Руководство по HTML DOM:Атрибут className

Руководство по HTML DOM:Атрибут classList

Руководство по HTML DOM:Объект Style