Элемент: метод getElementsByClassName()

Метод Element getElementsByClassName() возвращает живой HTMLCollection, который содержит каждый дочерний элемент, имеющий указанное(ые) имя(на) класса.

Метод getElementsByClassName() на интерфейсе Document работает по существу так же, за исключением того, что он действует на весь документ, начиная с корня документа.

names

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

An HTMLCollection предоставляющий динамически обновляемый список каждого элемента, который является членом каждого класса в names.

Как всегда, возвращаемый объект — динамический, что означает, что он всегда отражает текущее состояние дерева DOM, укоренённого в элементе, к которому была применена функция. По мере добавления новых элементов, соответствующих names, в поддерево, они немедленно появляются в коллекции. Аналогично, если существующий элемент, не соответствующий names, изменяет свой набор классов так, что он соответствует, он немедленно появляется в коллекции.

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

Чтобы найти элементы, включающие среди своих классов один указанный класс, нам достаточно указать это имя класса при вызове getElementsByClassName():

element.getElementsByClassName("test");

Этот пример находит все элементы, имеющие класс test, которые также являются потомками элемента, имеющего id main:

document.getElementById("main").getElementsByClassName("test");

Чтобы найти элементы, чьи списки классов включают как класс red, так и класс test:

element.getElementsByClassName("red test");

Вы можете использовать метод item() в возвращённом HTMLCollection или стандартную синтаксическую запись массивов, чтобы просмотреть отдельные элементы в коллекции. Однако следующий код не будет работать так, как ожидается, потому что "matches" изменится, как только любой "color-box" класс будет удалён.

const matches = element.getElementsByClassName("color-box");

for (let i = 0; i < matches.length; i++) {
  matches[i].classList.remove("color-box");
  matches.item(i).classList.add("hue-frame");
}

Вместо этого используйте другой метод, например:

const matches = element.getElementsByClassName("color-box");

while (matches.length > 0) {
  matches.item(0).classList.add("hue-frame");
  matches[0].classList.remove("color-box");
}

Этот код находит дочерние элементы с классом "color-box", добавляет класс "hue-frame", вызывая item(0), затем удаляет "color-box" (используя запись массива). Затем другой элемент (если таковые остались) станет item(0).

Мы также можем использовать методы Array на любом HTMLCollection, передавая HTMLCollection в качестве значения this метода. Здесь мы найдём все <div> элементы, которые имеют класс test:

const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === "DIV",
);