Метод HTML DOM Element getElementsByClassName()

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

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

Дополнительная информация:

Атрибут classList

Атрибут className

Метод querySelector()

Метод querySelectorAll()

Метод getElementsByTagName()

Объект Style HTML DOM

Урок:

Грамматика CSS

Выборщик CSS

Референс-руководство по выборщику CSS

NodeList

NodeList Это набор узлов, подобный массиву (список).

Вы можете получить доступ к узлам в списке через индекс (индекс). Начало индексации с 0.

Атрибут lengthВозвращает количество узлов в списке.

Пример

Пример 1

Измените текст первого списка с помощью класса "child":

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

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

Пример 2

Количество элементов с классом "child" в "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

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

Пример 3

Измените размер второго элемента с классом "child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

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

Пример 4

Используйте классы "child" и "color" для изменения размера первого элемента во втором элементе с классом "example":

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

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

Пример 5

Изменить цвет всех элементов с классом "child" в "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

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

Синтаксис

element.getElementsByClassName(classname)

Параметр

Параметр Описание
classname

Обязателен. Класс дочернего элемента.

Используйте пробелы для разделения нескольких имен (например, "child color").

Возвратное значение

Тип Описание
NodeList

Дочерние элементы, содержащие элемент с заданной классом.

Элементы сортируются по порядку их появления в исходном коде.

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

element.getElementsByClassName() Это функция DOM Level 1 (1998).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка