Метод HTML DOM getElementsByClassName()
❮ Элемент объектаПример
Измените текст первого элемента списка с class="child" (индекс 0) в списке с class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Метод getElementsByClassName() возвращает коллекцию дочерних элементов элемента с указанным именем класса в виде объекта NodeList.
Объект NodeList представляет собой набор узлов. Доступ к узлам можно получить по порядковым номерам. Индекс начинается с 0.
Совет: вы можете использовать свойство length объекта NodeList, чтобы определить количество дочерних узлов с указанным именем класса, затем вы можете пройтись по всем узлам и извлечь нужную информацию.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Синтаксис
element.getElementsByClassName(classname)
Значения параметров
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Технические детали
| Версия ДОМ: | Объект элемента основного уровня 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
❮ Элемент объекта