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