пример
Получить все элементы с указанным именем класса:
var x =
document.getElementsByClassName("example");
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
getElementsByClassName() метод возвращает коллекцию всех элементов в документе с указанным именем класса, как NodeList объекта.
Объект NodeList представляет коллекцию узлов. Узлы могут быть доступны с помощью индексов. Индекс начинается с 0.
Совет: Вы можете использовать длину свойство объекта NodeList , чтобы определить количество элементов с указанным именем класса, то вы можете перебрать все элементы и извлекать информацию , которую Вы хотите.
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4,0 | 9,0 | 3.0 | 3,1 | 9,5 |
Синтаксис
document.getElementsByClassName( classname )Значения параметров
| параметр | Тип | Описание |
|---|---|---|
| classname | String | Необходимые. Имя класса элементов, которые вы хотите получить. Для поиска нескольких имен классов, разделив их пробелами, как "test demo" . |
Технические подробности
| DOM Версия: | Базовый уровень объекта 1 Документ |
|---|---|
| Возвращаемое значение: | Нодлист объект, представляющий собой набор элементов с указанным именем класса. Элементы в возвращаемых коллекциях сортируются, как они появляются в исходном коде. |
Еще примеры
пример
Получить все элементы как с "example" и "color" классов:
var x =
document.getElementsByClassName("example color"); Попробуй сам " пример
Узнайте, как много элементов с классом = «например» есть в документе (используя свойство длины объекта NodeList):
var x =
document.getElementsByClassName("example").length; Попробуй сам " пример
Изменение цвета фона всех элементов с классом = «пример»:
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Попробуй сам " Похожие страницы
Учебник CSS: CSS селекторы
CSS Reference: CSS .class Selector
HTML DOM Reference: элемент. getElementsByClassName()
HTML DOM Ссылка: className Property
HTML DOM Ссылка: classList Property
HTML DOM Ссылка: Стиль объекта