HTML DOM getElementsByClassName()Метод

元素对象参考手册Объект Element

Пример

В списке с class="example", измените текст первого элемента (индекс 0) с class="child":

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

До изменения текста:

  • Кофе
  • Чай

После изменения текста:

  • Молоко
  • Чай

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

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

Метод getElementsByClassName() возвращает коллекцию всех элементов с указанным именем класса в документе в виде объекта NodeList.

Объект NodeList представляет упорядоченный список узлов. Мы можем получить доступ к узлам в объекте NodeList через номера индексов узлов в списке (номера индексов начинаются с 0).

Совет:Вы можете использовать свойство lengthобъекта NodeList, чтобы определить количество элементов с указанным именем класса, и перебрать элементы, чтобы получить нужный.

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает метод.

Метод
getElementsByClassName() 4.0 9.0 3.0 3.1 9.5

Синтаксис

element.getElementsByClassName(classname)

Значения параметров

Параметр Type Описание
classname String Обязательно. Имя класса элемента, который нужно получить.

Несколько имён классов разделяются пробелами, например, "test demo".

Технические детали

Версия DOM: Объект Element уровня Core Level 1
Возвращаемое значение: Объект NodeList, представляющий коллекцию элементов с указанным именем класса. Элементы упорядочены в том порядке, в котором они появляются в коде.
Examples

Другие примеры

Пример

Измените цвет фона второго элемента с 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;

xРезультат вывода:

3

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

Пример

Измените цвет фона первого элемента с именами классов "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:объект HTML DOM Style

元素对象参考手册Объект Element

Другие расширения