Метод getElementsByClassName()
Примеры element.getElementsByClassName()
Измените текст первого элемента списка на class="child":
const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Молоко";
Попробуйте сами »
Количество элементов с class="child" в "myDIV":
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;
Попробуйте сами »
Измените размер второго элемента с class="child":
const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";
Попробуйте сами »
Ещё примеры ниже.
Описание getElementsByClassName()
Метод getElementsByClassName() возвращает коллекцию дочерних элементов с заданным именем класса.
Метод getElementsByClassName() возвращает объект NodeList.
Связные страницы getElementsByClassName()
Учебники:
NodeList
NodeList — это массивоподобная коллекция (список) узлов.
Доступ к узлам в списке осуществляется по индексу. Индекс начинается с 0.
Свойство length возвращает количество узлов в списке.
Синтаксис getElementsByClassName()
element.getElementsByClassName(classname)
Параметры getElementsByClassName()
| Параметр | Описание |
|---|---|
| classname | Обязательно. Имя класса дочерних элементов. Разделите несколько имен пробелами ("цвет дочернего элемента"). |
Возвращаемое значение getElementsByClassName()
| Тип | Описание |
|---|---|
| NodeList | Дочерние элементы элементов с заданным именем класса. Элементы сортируются так, как они отображаются в исходном коде. |
Ещё примеры getElementsByClassName()
Измените размер первого элемента с помощью классов "child" и "color" внутри второго элемента с class="example":
const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";
Попробуйте сами »
Изменить цвет всех элементов в "myDIV" c class="child":
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
nodes[i].style.color = "red";
}
Попробуйте сами »
Поддержка браузера getElementsByClassName()
element.getElementsByClassName() является функцией DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |